Kompatibilität der Produktion von Inline-Block-Attributen_HTML/Xhtml_Webseiten

Vor einem Jahr gab es im Internet keinen Artikel über das Inline-Block-Attribut. Um es allen zu erleichtern, dieses Attribut besser zu verstehen, habe ich den Artikel „Anzeige: Detailliertes Verständnis des Inline-Blocks“ zusammengefasst und zusammengestellt. damals.
Heutzutage besteht eine zunehmende Nachfrage nach der Verwendung des Inline-Block-Attributs. Leider unterstützen nur noch Firefox3 Beta, IE8 Beta, Opera und Safari das Inline-Block-Attribut (Hinweis: Ursprünglich wurde es nur von Opera und Safari unterstützt ), aber IE6, IE7 können durch Auslösen von hasLayout simuliert werden. Firefox2 verfügt über die privaten Attribute -moz-inline-box und -moz-inline-stack (der Vergleich dieser beiden Attribute ist aus Qin Ges „Zwei Beispiele für die Anwendung von Display“ zitiert :inline-block").
In tatsächlichen Anwendungen wird -moz-inline-box Probleme wie die Ausrichtung zwischen Elementen haben. Obwohl Firefox auch über ein privates Attribut -moz-box-align verfügt, um Ausrichtungsprobleme zu lösen, ist es immer noch schwer vorherzusagen, dass dies der Fall sein wird Es gibt viele Probleme und im Allgemeinen verhält sich -moz-inline-stack eher wie inline-block, was in Firefox3 getestet werden kann. Es gibt jedoch einen Fehler bei der Verwendung von -moz-inline-stack; Wenn das äußere Element eines display:-moz-inline-stack; ist, kann der darin enthaltene Link in Firefox nicht angeklickt werden Verwenden Sie position:relative;, um es zu lösen.
Der endgültige Code, den wir simuliert haben, lautet wie folgt:
display:inline-block; /*Firefox3 Beta, IE8 Beta, Opera, Safari-Unterstützung, hasLayout, das Inline-Elemente unter IE auslöst*/
display:-moz-inline-stack; /* Firefox's private Eigenschaft, Sie kann auch -moz-inline-box */ verwenden
zoom:1; /*hasLayout wird unter IE ausgelöst*/
*display:inline; /*Sobald hasLayout unter IE ausgelöst wird, führt das Setzen des Blockelements zu einem ähnlichen Effekt wie display:inline: Inline-Block */
text-indent:-9999px;
*text-indent:0;
font-size:0;
line-height:0; /* Wenn Sie Text ausblenden möchten, können Sie verwenden diese vier Attribute */
/*Um den Text oben auszublenden, können Sie außerdem eine einfachere Methode verwenden: line-height: super large value: 0;
overflow:hidden; /* Überlaufinhalt ausblenden */
vertical-align:middle; /* Vertikale Zentrierung der Linie für die relativ große Abweichung von Opera */
Breite:? px; /*? Für jeden nicht automatischen Wert*/
Höhe:? px; /*? Für jeden nicht automatischen Wert*/