Informationen zur Anzeige unter ie7: Beispiel-Tutorial für Inline-Blocks

Über die nicht unterstützte Lösung für display: inline-block unter ie7

Ich bin heute beim Codieren auf dieses Problem gestoßen.

Wenn es sich um ein Inline-Element handelt, wird es von allen Browsern unterstützt, wenn seine Anzeigeattributeinstellung auf „inline-block“ gesetzt ist.

Wenn es sich dagegen um ein Element auf Blockebene handelt, stellen Sie es auf display: inline-block ein, dann wird es von ie6/ie7 nicht unterstützt.

Verwenden Sie display:inline-block für Inline-Elemente im IE, erkennen Sie es nicht, aber die Verwendung von display:inline-block löst das Layout im IE aus, wodurch Inline-Elemente erstellt werden Darstellung des display:inline-block-Attributs.

Zu diesem Zeitpunkt wird das Layout des Blockelements nur durch display:inline-block ausgelöst, und es selbst ist ein Zeilenlayout, sodass das Blockelement nach dem Auslösen noch vorhanden ist Zeilenlayout und werden nicht als Blockelemente in Opera als Inline-Objekte gerendert.

Lösung:

1 (Das habe ich dieses Mal verwendet)

Direkt Legen Sie das Blockelement fest, das als Inline-Objekt gerendert werden soll (legen Sie das Attribut display:inline fest) und lösen Sie dann das Layout des Blockelements aus (z. B. Zoom:1 oder Float-Attribut usw.). Der Code lautet wie folgt:
/*Empfohlen: IE6, 7*/ div {

                                        *zoom:1;

🎜>> Alle drei sind unverzichtbar

/*Recommended*/div {

>

, (kopieren)

Verwenden Sie zuerst das display:inline-block-Attribut, um das Blockelement auszulösen, und definieren Sie dann display:inline, um das Blockelement als Inline-Objekt darzustellen (Zwei Displays müssen nacheinander in zwei CSS-Anweisungen platziert werden, um eine Wirkung zu erzielen. Dies ist ein klassischer Fehler des IE. Wenn display:inline-block zuerst definiert wird und dann die Anzeige wieder auf inline oder block gesetzt wird, ändert sich das Layout wird nicht verschwinden). Der Code lautet wie folgt (...andere Attributinhalte werden weggelassen):

div {display:inline-block;...}

div {display :inline;}

Das obige ist der detaillierte Inhalt vonInformationen zur Anzeige unter ie7: Beispiel-Tutorial für Inline-Blocks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!