Inline-Block-Attribut für Simulationskompatibilität_Erfahrungsaustausch

Heutzutage gibt es immer mehr Anforderungen an die Verwendung des Inline-Block-Attributs. Leider unterstützen nur Firefox3 Beta, IE8 Beta, Opera und Safari das Inline-Block-Attribut (Hinweis: Ursprünglich wurde es nur von Opera und Safari unterstützt). IE6 und IE7 können Trigger hasLayout zur Simulation übergeben. 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:inline-“ zitiert. 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 es viele Probleme geben wird, und relativ gesehen verhält sich -moz-inline-stack eher wie inline-block, was in Firefox3 getestet werden kann. Es gibt jedoch auch einen Fehler bei der Verwendung von -moz-inline-stack; Wenn das äußere Element eines display:-moz-inline-stack;-Elements display:inline; ist, werden die darin enthaltenen Links in Firefox nicht anklickbar. Dies erfordert die Verwendung von position:relative;

Der endgültige Code, den wir simuliert haben, lautet wie folgt:

Kopieren Sie den CodeDer Code 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; privates Attribut, auch verfügbar Verwenden Sie -moz-inline-box */

zoom:1; /*hasLayout wird unter IE ausgelöst*/
*display:inline; /*Once hasLayout wird unter IE ausgelöst, Wenn Sie das Blockelement auf „inline“ setzen, wird display:inline ähnlich wie display:inline-block*/

text-indent:-9999px; 0;
line -height:0; /* Wenn Sie Text ausblenden müssen, können Sie diese vier Attribute verwenden */
/*Darüber hinaus können Sie den Text oben auch mit einer vereinfachten Methode ausblenden: line-height: super large value; Linie, für Operas relativ große Abweichung */

width:? px; /*? Für jeden nicht automatischen Wert*/
Höhe:? px; /*? Für jeden nicht automatischen Wert*/