Kompatibilität mit der Inline-Block-Eigenschaft

<br />Vor einem Jahr gab es im Internet keine Artikel über die Inline-Block-Eigenschaft. Um jedem zu helfen, diese Eigenschaft besser zu verstehen, habe ich damals einen Artikel mit dem Titel „Detailliertes Verständnis von display:inline-block“ zusammengefasst und zusammengestellt.
Jetzt gibt es immer mehr Forderungen nach der Verwendung von Inline-Block-Attributen. Leider unterstützen nur Firefox 3 Beta, IE8 Beta, Opera und Safari Inline-Block-Attribute (Hinweis: ursprünglich unterstützten es nur Opera und Safari). IE6 und IE7 können es jedoch simulieren, indem sie hasLayout auslösen. Firefox 2 hat die privaten Attribute -moz-inline-box und -moz-inline-stack (der Vergleich dieser beiden Attribute ist ein Zitat aus Qin Ges „Zwei Anwendungsbeispiele für display:inline-block“).
In tatsächlichen Anwendungen treten bei -moz-inline-box Probleme auf, beispielsweise die Ausrichtung zwischen Elementen. Obwohl Firefox auch ein privates Attribut -moz-box-align hat, um das Ausrichtungsproblem zu lösen, ist es immer noch schwer vorherzusagen und es gibt viele Probleme. Relativ gesehen verhält sich -moz-inline-stack eher wie ein Inline-Block, was in Firefox3 getestet werden kann. Bei der Verwendung von -moz-inline-stack tritt jedoch ein Fehler auf. Wenn das äußere Element eines Elements mit display:-moz-inline-stack; display:inline; ist, können die darin enthaltenen Links in Firefox nicht mehr angeklickt werden. Dies muss durch die Verwendung von position:relative; gelöst werden.
Schließlich sieht der von uns simulierte Code wie folgt aus:
display:inline-block; /*Unterstützt von Firefox3 Beta, IE8 Beta, Opera und Safari, löst hasLayout von Inline-Elementen im IE aus*/
display:-moz-inline-stack; /* Privates Eigentum von Firefox, Sie können auch -moz-inline-box verwenden */
zoom:1; /*Löst hasLayout im IE aus*/
*display:inline; /*Sobald hasLayout im IE ausgelöst wird, bewirkt das Setzen des Blockelements auf Inline, dass display:inline den gleichen Effekt hat wie display:inline-block*/
Texteinzug: -9999px;
*Texteinzug:0;
Schriftgröße: 0;
line-height:0; /* Wenn Sie Text verbergen müssen, können Sie diese vier Attribute verwenden*/
/* Darüber hinaus können Sie eine einfachere Methode verwenden, um den obigen Text auszublenden: line-height: super large value; font-size: 0; */
overflow:hidden; /*Überlaufinhalt ausblenden*/
vertical-align:middle; /* Linie vertikal zentrieren, für große Abweichungen in Opera*/
Breite:? px; /*? Jeder nicht automatische Wert*/
Höhe:? px; /*? Jeder nicht automatische Wert*/

<<: Zusammenfassung der Mysql-Existes-Verwendung

>>: Nginx-Server fügt benutzerdefinierte Systemd-Dienstprozessanalyse hinzu

Detaillierte Erklärung der Lösung für das Nginx-Panikproblem

Kompatibilität mit der Inline-Block-Eigenschaft

Detaillierte Erklärung der Lösung für das Nginx-Panikproblem

Vue-Methode zum Überprüfen, ob der Benutzername verfügbar ist

Ein Artikel, der Ihnen hilft, die Vererbung und Prototypenkette von JS zu verstehen

Docker-Volumes-Dateizuordnungsmethode

Detaillierte Erklärung der 4 Codes, die die Website schwarz, weiß und grau machen

Zusammenfassung der Methode von React zum Erstellen von Komponenten

Beispielcode zum Ändern des Textstils der Eingabeaufforderung in HTML

Beispiel für die Konfiguration mehrerer SSL-Zertifikate für eine einzelne Nginx-IP-Adresse

Zur grundlegenden Verwendung von HTML gehören Links, Stylesheets, Span und Div usw.

Detaillierte Erläuterung der Methode zum Vergleichen von Daten in MySQL

Artikel empfehlen

Methoden und Schritte für die verteilte Bereitstellung von Etcd basierend auf Docker

Lösung für das Problem des MySQL-Datenverzögerungssprungs

MySQL-Ansichtsprinzipien und grundlegende Bedienungsbeispiele

Besser aussehende benutzerdefinierte CSS-Stile (Titel h1 h2 h3)

So positionieren Sie die Kopfzeile mithilfe des CSS-Sticky-Layouts oben

Docker stellt über einen Port eine Verbindung zu einem Container her

Sehr praktisches Tutorial zur umfassenden Zusammenfassung der MySQL-Funktionen und detaillierten Beispielanalysen

Was ist Nginx-Lastausgleich und wie wird er konfiguriert?

Detaillierte Erklärung der 10 häufigsten HTTP-Statuscodes

So verarbeiten Sie Blob-Daten in MySQL

4 Möglichkeiten zum Ändern des MySQL-Root-Passworts (Zusammenfassung)

Schöner Kontrollkästchenstil (Feld für Mehrfachauswahl), perfekt kompatibel mit IE8/9/10, FF usw.

Zwei Möglichkeiten zum Deklarieren privater Variablen in JavaScript

Eine vollständige Liste häufig gestellter JavaScript-Fragen für Front-End-Interviews

Ändern des Standard-Bildlaufleistenstils im Front-End-Projekt (Zusammenfassung)