Vor einem Jahr gab es keinen Artikel über das Inline-Block-Attribut im Internet. Um jedem zu erleichtern, das Attribut besser zu verstehen, habe ich den Artikel "Tiefe: eingehendes Verständnis der Anzeige: Inline-Block" zusammengefasst und zusammengestellt.
Jetzt gibt es eine zunehmende Nachfrage nach der Anwendung von Inline-Block-Attributen. Leider unterstützen nur Firefox3 Beta, IE8 Beta, Opera und Safari die Inline-Block-Attribute (Hinweis: Nur Opera und Safari unterstützen sie), aber IE6 und IE7 können simulieren, indem sie Haslayout auslösen. Firefox2 hat private Attribute -moz-inline-Box- und -moz-Inline-Stack-Stapel-Attribute (der Vergleich dieser beiden Attribute wird aus den "zwei Beispielen für die Anwendung der Anzeige: Inline-Block" von Qin GE zitiert).
In den tatsächlichen Anwendungen hat -moz-inline-Box Probleme wie die Ausrichtung zwischen Elementen. Obwohl Firefox auch über ein Privateigentum-Moz-Box-Align verfügt, um das Ausrichtungsproblem zu lösen, ist es immer noch schwierig, viele Probleme vorherzusagen. Relativ gesehen führt der MOZ-inline-Stack eher wie Inline-Block aus, der in Firefox3 getestet werden kann. Es wird jedoch auch bei der Verwendung von -moz-Inline-Stack einen Fehler geben. Wenn das äußere Element eines Displays: -moz-inline-Stack; wird angezeigt: Inline; Dies wird die Links in Firefox nicht nicht unkennbar machen, und dies muss durch Position gelöst werden: Relativ;.
Der endgültige Code, den wir simuliert haben, lautet wie folgt:
Anzeige: Inline-Block; /*Firefox3 Beta, IE8 Beta, Opera, Safari Support, Haslayout auslösen das Inline -Element unter IE*/
Anzeige: -moz-inline-Stack; / * Die privaten Attribute von Firefox können auch -moz-inline-Box */verwenden
Zoom: 1; /*Dh Trigger haslayout*//
*Anzeige: Inline; /*Sobald Haslayout unter IE ausgelöst wird, wird das Anzeigen der Anzeige: Inline-Block*/die Anzeige ausgelöst: Inline-Effekt ähnlich: Inline-Block*/
Text-Indent: -9999px;
*textindent: 0;
Schriftgröße: 0;
Zeilenhöhe: 0; /* Wenn Sie Text ausblenden möchten, können diese vier Attribute verwendet werden*/
/*Zusätzlich kann der oben versteckte Text versteckt und eine vereinfachte Methode verwendet werden: Zeilenhöhe: Super großer Wert; Schriftgröße: 0; */
Überlauf: versteckt; /* Überlaufinhalt ausblenden*//
vertikaler Align: Mitte; /* vertikales Zentrieren innerhalb der Linie, für die größere Abweichung der Oper*////
Breite:? PX; /*? ist ein nicht-auto-Wert*/
Höhe:? PX; /*? ist ein nicht-auto-Wert*/