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
Tutorial zur Konfiguration der kostenlosen MySQL-Installationsversion
In diesem Artikel wird das kostenlose MySQL-Insta...
Muss MySql ein Commit durchführen?
Ob MySQL bei der Ausführung von Vorgängen wie Ein...
Beispielcode für kreisförmigen Hover-Effekt mit CSS-Übergängen
Dieser Artikel stellt vor Online-Vorschau und Dow...
Detaillierte Analyse der Übereinstimmungsregeln bei der Verarbeitung von Anfragen durch Nginx
Wenn nginx eine Anfrage empfängt, gleicht es zunä...
Detaillierte Erklärung zur Verwendung von HTML-Einbettungs-Tags und -Attributen
1. Grundlegende Grammatik Code kopieren Der Code ...
Ein Blick auf toolbasierte Websites: die Definition von toolbasierten Websites und eine typische Fallanalyse (Bilder und Text)
Wenn es um Tool-Websites geht, haben wir zunächst...
Reines CSS und Flutter realisieren jeweils einen atmenden Lichteffekt (Beispielcode)
Beim letzten Mal fragte ein sehr fleißiger Fan, o...
Beinhaltet der %-Wert im neu erstellten MySQL-Benutzer localhost?
Normale Erklärung % bedeutet, dass jeder Client e...
Detailliertes Tutorial zur Installation von Ubuntu 19.10 auf Raspberry Pi 4
Da einige Abhängigkeiten von OpenCV beim Ausführe...
Kapseln Sie eine einfachste ErrorBoundary-Komponente zur Behandlung von React-Ausnahmen
Vorwort Ab React 16 wurde das Konzept der Fehlerg...
Lösung für den ineffektiven Rand von in HTML verschachtelten Divs
Hier ist eine Lösung für das Problem, dass der Ra...
So konfigurieren Sie SSH für die Anmeldung bei Linux mit Git Bash
1. Generieren Sie zunächst die öffentlichen und p...
In einem Artikel erfahren Sie, wie Sie ein Vue-Plugin schreiben
Inhaltsverzeichnis Was ist ein Plugin Plugins sch...
mysql erstellt Root-Benutzer und normale Benutzer sowie Änderungs- und Löschfunktionen
Methode 1: Verwenden Sie den Befehl SET PASSWORD ...
Implementierung der Multi-Environment-Konfiguration (.env) des Vue-Projekts
Inhaltsverzeichnis Was ist eine Multiumgebungskon...