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
Artikel empfehlen
JQuery implementiert das Ausblenden und Anzeigen von Animationseffekten
In diesem Artikel wird der spezifische Code von J...
JavaScript Dom implementiert das Prinzip und Beispiel eines Karussells
Wenn wir ein Karussell bauen wollen, müssen wir z...
Vue Front-End HbuliderEslint Echtzeitüberprüfung Automatische Reparatureinstellungen
Inhaltsverzeichnis Installation des ESLint-Plugin...
Verwenden Sie Angular CDK, um eine Service-Popup-Toast-Komponentenfunktion zu implementieren
Inhaltsverzeichnis 1. Umweltinstallation 2. Erste...
Detaillierte Erläuterung der elastischen CSS3-Erweiterungsbox
verwenden Flexible Boxen spielen beim Front-End-L...
MySQL-Gleitaggregation/Jahresaggregation – Prinzip und Anwendungsbeispielanalyse
In diesem Artikel werden anhand von Beispielen di...
Ein vollständiges Tutorial zur Installation von Ubuntu 20.04 mit einer virtuellen VMware-Maschine
Ubuntu ist ein relativ beliebtes Linux-Desktopsys...
So ändern Sie die Zeichensatzkodierung in MySQL 5.5/5.6 unter Linux auf UTF8
1. Melden Sie sich bei MySQL an und verwenden Sie...
Textbereich Textbereich Breite und Höhe Breite und Höhe Automatische Anpassung Implementierungscode
Code kopieren Der Code lautet wie folgt: <HTML...
Ein Beispiel für die dynamische Implementierung verschiedener Datenstile in einer Spalte der el-Tabelle des Elements ui
Problembeschreibung Im Rahmen der Ele.me-Benutzer...
Tutorial zur Installation von MySQL8 auf Centos7
Neue Funktionen in MySQL 8: Meine persönliche Mei...
So stellen Sie Dienste in Windows Server 2016 bereit (Grafisches Tutorial)
Einführung Wenn eine große Anzahl an Systemen ins...
Ausführliches Tutorial zu Installations- und Upgradeproblemen bei MySQL 5.7.30
Keil Da auf dem Computer eine relativ alte MySQL-...
Vue-Plugin-Fehler: Auf dieser Seite wurde Vue.js erkannt. Problem gelöst
Das Vue-Plugin meldet einen Fehler: Vue.js wurde ...
Mehrere Elemente in derselben Zeile unter Div in CSS rechtsbündig ausrichten
Methode 1: schweben: rechts Darüber hinaus wird d...