Der Inline-Block funktioniert im Internet Explorer 7, 6 nicht

77

Ich habe diesen CSS-Code mit einem inline-block. Kann mir jemand sagen, wie es in Internet Explorer 6 und 7 funktioniert? Irgendwelche Ideen? Vielleicht mache ich etwas falsch? Vielen Dank!

#signup {
   color:#FFF;
   border-bottom:solid 1px #444;
   text-transform:uppercase;
   text-align:center;
}
#signup #left {
   display: inline-block
}
#signup #right {
   background-image:url(images/signup.jpg);
   border-left: solid 1px #000;
   border-right: solid 1px #000;
   display: inline-block; 
   padding:1% 2%
   width:16%;
}
#signup #right a { font-size:100%; font-weight:bold } 
#signup #right p { font-size:90%; font-weight:bold }
#signup a:hover  { color:#FFF; text-decoration:underline }
internet-explorer internet-explorer-7 internet-explorer-6 css Webmaster
quelle

Antworten:

181

Funktioniert in IE6 / IE7 display: inline-blocknur mit Elementen, die von Natur aus inline sind (z. B. spans).

Damit es mit anderen Elementen wie divs funktioniert , benötigen Sie Folgendes:

#yourElement {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

*display: inlineverwendet einen "sicheren" CSS-Hack, um nur auf IE7 und niedriger anzuwenden .

Stelltzoom: 1 für IE6 / 7 hasLayout bereit . "Layout" zu haben ist eine Voraussetzung, um display: inline-blockimmer arbeiten zu können.

Es ist möglich, diese Problemumgehung anzuwenden, während gültiges CSS beibehalten wird. Es lohnt sich jedoch nicht, darüber nachzudenken, insbesondere wenn Sie bereits Eigenschaften mit Herstellerpräfix verwenden.

Lesen Sie dies für weitere Informationen über display: inline-block(aber vergessen Sie -moz-inline-stack, dass dies nur für den jetzt alten Firefox 2 erforderlich war).

dreißig Punkte
quelle
Ich habe gelesen (kann aber nicht testen), dass Sie auch einstellen sollten _height: ###px, was nur von IE6 und darunter verstanden wird. Angenommen, Sie interessieren sich immer noch für einen Browser, der offiziell tot ist.
Blazemonger
1
Ein guter Artikel zu diesem Thema, der auch Firefox 2 und IE5.5 & 6 behandelt: blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block
sshow
1
Eine Einschränkung bei der Verwendung dieser Hacks als solche ist, dass wir nicht wissen, wie zukünftige Browser das vorhergehende Sternchen analysieren werden. Ich würde die Verwendung von bedingten IE-Anweisungen für ein separates Stylesheet festlegen, das diese Hacks erleichtern würde.
Jack
1
@ JackWilliams: Alle vernünftigen "zukünftigen Browser" werden Unit-Tests haben, um zu verhindern, dass dies jemals ein Problem darstellt. Hier ist zum Beispiel ein zufälliges WebKit. Sie brauchen sich keine Sorgen zu machen, kein neuer Browser wird jemals Eigenschaften akzeptieren, denen Junk vorangestellt ist.
dreißig Punkte
2

*display:inlinefunktioniert gut als IE7-Hack . Sie können zoom:1den Code jedoch als hinzufügen *background:#fff; *display:inline; zoom:1. Hier können Sie Ihren Hintergrundfarbcode eingeben. Manchmal wird das Layout nicht auf dem Bildschirm angezeigt. Beispielsweise werden Listenelemente nicht auf dem Bildschirm angezeigt. In solchen Fällen funktioniert dies dann hervorragend und wird wie in anderen Browsern angezeigt.

Akgupta
quelle