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

Beispielcode zur Implementierung des Verlaufs in Vuex

Die Erfahrungen aus dem Vergleich und der Analyse der Homepages inländischer Social-Networking-Websites werden mit allen geteilt (Bild)

Wir hoffen, dass dieser Artikel durch eine verglei...

Kompatibilität mit der Inline-Block-Eigenschaft

Beispielcode zur Implementierung des Verlaufs in Vuex

Mehrere Möglichkeiten zum Verschlüsseln und Entschlüsseln von MySQL (Zusammenfassung)

12 Javascript-Tabellensteuerelemente (DataGrid) sind aussortiert

Detaillierte Verwendung der MySQL-Funktionen row_number() und over()

Zabbix implementiert die Überwachung mehrerer MySQL-Prozesse

CentOS 7 SSHD ändern | Root-Login und SSHD-Port-Skriptdefinition verbieten

Detaillierte Erläuterung der Idee der xshell-Remote-Anmeldung bei CentOS7 ohne Kennwortanmeldung

Eine kurze Diskussion über Makrotasks und Mikrotasks in js

Detaillierte Erläuterung der Front-End-Methode zum Übergeben von Parametern zwischen HTML-Seiten

Gründe und Lösungen für das Nicht-Wirksamwerden der MySQL-SQL-Modus-Änderung

Artikel empfehlen

Fünf Möglichkeiten zum Durchlaufen von Objekten in JavaScript Beispielcode

Tutorial zu HTML-Tabellen-Tags (20): Zeilenhintergrund-Farbattribut BGCOLOR

Detaillierte Erklärung der Docker-Einstiegspunktdatei

Manuelle und geplante Sicherungsschritte für die MySQL-Datenbank

So verwenden Sie IDEA, um ein Webprojekt zu erstellen und es auf Tomcat zu veröffentlichen

Umfassende Übersicht über die verschiedenen Abhörmethoden von Vue3.0

So installieren Sie RabbitMQ schnell in Docker

Zusammenfassung der MySQL-Fremdschlüsseleinschränkungen und Tabellenbeziehungen

Detaillierte Erklärung der Datentypen in den JavaScript-Grundlagen

Lösung für den ineffektiven Rand von in HTML verschachtelten Divs

40 Schriftarten, empfohlen für berühmte Website-Logos

Implementierungscode für die Schiebeschalterfunktion der Registerkarte „Links“ und „Rechts“ des WeChat-Applet

Docker Compose-Installationsmethoden in verschiedenen Umgebungen

So fügen Sie Videos in HTML ein und machen sie mit allen Browsern kompatibel

Die Erfahrungen aus dem Vergleich und der Analyse der Homepages inländischer Social-Networking-Websites werden mit allen geteilt (Bild)