Kürzlich habe ich eine neue Website für mich selbst erstellt und mir einige Effekte ausgedacht, bin aber bei der Implementierung auf einige kleinere Probleme gestoßen, wie zum Beispiel diesen Inline-Block. Glücklicherweise wurden die meisten Probleme gelöst, also habe ich sie geschrieben, um sie zu teilen.
Wenn wir Webseiten erstellen, möchten wir manchmal, dass ein Element die Breite und Höhe wie ein Block definieren kann und außerdem wie ein normales Inline-Element kontinuierlich ausgeführt werden kann. Zum Beispiel der Ort, der im Bild unten durch die rote Linie markiert ist:
Normalerweise verwenden wir Code wie diesen, um einen solchen Effekt zu erzielen:
Beispiel-Quellcode
[www.downcodes.com] Obwohl dies das Ziel erreichen kann, ist der Code immer noch nicht ausreichend verfeinert und flexibel genug. Im Idealfall können wir dies mit nur dem folgenden Code erreichen:
Beispiel-Quellcode
[www.downcodes.com] In diesem Fall müssen wir für das Tag a die Breite, die Höhe und das Hintergrundbild angeben. Das Standardanzeigeattribut des a-Tags ist jedoch Inline und Breite und Höhe sind ungültig. Und wenn display:block auf a gesetzt ist, kann das Breiten- und Höhenproblem zwar gelöst werden, das Element unterbricht jedoch automatisch die Zeilen und kann nicht den gewünschten Effekt erzielen. Gibt es eine Möglichkeit, dasselbe zu erreichen wie mit dem img-Tag, mit dem Höhe und Breite festgelegt werden können, ohne dass die Zeile automatisch unterbrochen wird?
Die Antwort ist ja. Opera und Webkit unterstützen eine CSS2-Eigenschaft display: inline-block. Mit diesem Attribut können wir unter Opera den gewünschten Effekt vollständig erzielen, unter anderen Browsern funktioniert es jedoch nicht.
Das Anzeigeattribut verfügt auch über eine weniger häufig verwendete Wertanzeige: Inline-Tabelle. Durch die Verwendung dieses Werts kann auch der von uns benötigte Effekt vollständig erzielt werden. Diese Eigenschaft wird von allen Browsern außer IE korrekt unterstützt, aber ... nun ja, wieder IE. Obwohl alle Webentwickler es hassen werden, wenn sie mit CSS konfrontiert werden, ist der Verzicht auf den IE gleichbedeutend mit dem Verzicht auf 70 % der Benutzer, sodass wir immer noch andere Lösungen finden müssen.
Mir blieb nichts anderes übrig, als es zu googeln, und ich habe es tatsächlich gefunden. Wie in diesem Artikel erwähnt, wird dieses Element zum Inline-Block, wenn Sie zuerst das hasLayout des IE auslösen und dann dessen Anzeige festlegen: Auf diese Weise können wir diese unvernünftige Funktion des IE nutzen und sie mit etwas CSS kombinieren Hacks, die CSS-Codes bereitstellen, die mit verschiedenen Browsern kompatibel sind:
Beispiel-Quellcode
[www.downcodes.com] .element-class {
display: -moz-inline-stack; //Nur Firefox-Code
display: inline-block; //einige Standardbrowser
Zoom: 1; //nur IE
*display: inline; //Nur IE kennt diesen Code (CSS-Hack)
}
Durch diesen Code können Sie einen Inline-Block erreichen, der sich in verschiedenen Browsern konsistent verhält. Diese Methode hat jedoch einen kleinen Nachteil: Sie kann die W3C-CSS-Überprüfung nicht bestehen. Natürlich ist es auch sehr einfach, die Überprüfung zu bestehen. Sie können ein Stylesheet mit dem Inline-Table-Attribut für andere Browser als den IE ausgeben und ein separates IE-Only-CSS für den IE ausgeben.
