li {
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px;
zoom: 1;
*display: inline;
_height: 250px;
}Cross-Browser Inline-Block
Chris Coyier am
Vielen Dank
Inline-block sind für Formularlayouts sehr nützlich (angewendet auf Labels, Eingabefelder, Fehlermeldungen). Funktioniert hervorragend in IE6+, Mozilla 3.6+, Safari, Chrome usw.
Das ist ein sehr nützlicher Hack! Es ist viel besser als schwebende li-Elemente. Danke.
Wenn Sie unschöne CSS-Hacks vermeiden möchten und sich nicht um IE6 kümmern (was Sie nicht tun sollten), können Sie eine korrekte Inline-Block-Behandlung in allen Browsern sicherstellen, wenn Sie ein Tag verwenden, das standardmäßig den Anzeigen-Wert inline hat (außer dem <p>-Tag).
Tags wie <span>, <b>, <s>, <q>, <u>, <i> oder <a> funktionieren in allen Browsern perfekt, wenn Sie display:inline-block darauf anwenden.
Ich empfehle <span>, da es semantisch <div> ähnelt.
Denken Sie nur daran, dass der Leerraum zwischen Inline-Blöcken genauso gerendert wird wie zwischen Text.
Klicken Sie hier, um eine Demo zu sehen und sie in verschiedenen Browsern zu testen.
Das ist standardmäßig ein Block-Level-Element, aber ansonsten ein guter Kommentar.
Verdammt, HTML ist deaktiviert. Der *Absatz-Tag* ist standardmäßig Block-Level.
Das wäre wahr, abgesehen von Firefox 2, weshalb -moz-inline-stack enthalten ist.
Ich muss sagen, Ihre Website ist sehr nützlich, ich lande hier oft, auch die CSS-Frog-Regeln.
Bin noch nicht bereit, meine Website zu teilen, vielleicht wenn sie etwas fertiger ist!
Hallo, gibt es bekannte Probleme mit Inline-Block in Chrome, schauen Sie sich dieses seltsame Verhalten an, das ich in der neuen Beta-Version von WordPress 2012 gefunden habe – http://wordpress.org/support/topic/twentytwelve-nav?replies=17
Irgendwelche Vorschläge oder Ideen?
Ich will das mit Divs
Ich habe `white-space: nowrap;` zu meinem Inline-Block-Mixin hinzugefügt, um ein Problem zu beheben, das ich in Chrome auf Android mit einigen `<li>`-Elementen hatte, die grundlos auf eine andere Zeile brachen.
Was bedeutet display:inline und was bedeutet der "*" vor einer Eigenschaft?
Danke
Angesichts des Datums (September 2014) ist es da vernünftig, einfach nur "display: inline-block;" zu verwenden, wenn man keine Unterstützung für ältere Browser benötigt?
Hallo,
Ich habe ein Problem mit Inline-Block in Chrome und Opera.
Hier ist der Quellcode: Ein Link.
Hier funktioniert es in Chrome und Opera, seltsamerweise in Firefox, es funktioniert perfekt in Microsoft Edge unter Windows 10, nicht in Safari. Warum funktioniert es jetzt nicht in Chrome und Opera? Wenn ich inline-block durch block ersetze, funktioniert es in Chrome und Opera, aber seltsamerweise.
Vielen Dank!
Es gibt einen Link-Hover-Effekt (3D-Rotation).
Entschuldigung für den vorherigen Code!
Hier ist der Link
http://codepen.io/anon/pen/pjpGBx
In modernen Mozilla-Versionen verursacht display: -moz-inline-stack Textkollaps in einem Div, wenn der Code zum Beispiel lautet:
<div>img</div> <div>h1 Text Text</div>Und der Browser erkennt auch die Abstände in diesem zweiten Div nicht.
Seien Sie vorsichtig!
Danke, gute Tipps