IE7 versteht Anzeige: Inline-Block nicht

127

Kann mir bitte jemand helfen, diesen Fehler in den Griff zu bekommen? Mit Firefox funktioniert es einwandfrei, mit Internet Explorer 7 jedoch nicht. Es scheint das nicht zu verstehen display: inline-block;.

html:

<div class="frame-header">
    <h2>...</h2>
</div>

CSS:

.frame-header {
    height:25px;
    display:inline-block;   
}

html internet-explorer-7 css

— Lanthuong
quelle

1

Was genau für Sie zu erreichen? Welchen Effekt?

— Iladarsda

302

Der IE7- display: inline-block;Hack lautet wie folgt:

display: inline-block;
*display: inline;
zoom: 1;

Standardmäßig unterstützt IE7 nur inline-blocknatürliche inlineElemente ( Quirksmode-Kompatibilitätstabelle ), sodass Sie diesen Hack nur für andere Elemente benötigen.

zoom: 1Auslöser ist es zu hasLayoutVerhalten, und wir nutzen die Sterne - Unterkunft Hack für die Einstellung displayzu inlinenur in IE7 und niedriger (neueren Browsern wird das nicht gelten). hasLayoutund inlinezusammen wird im Grunde genommen inline-blockVerhalten in IE7 auslösen , also sind wir glücklich.

Dieses CSS wird nicht validiert und kann Ihr Stylesheet trotzdem durcheinander bringen. Daher kann die Verwendung eines Nur-IE7-Stylesheets durch bedingte Kommentare eine gute Idee sein.

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->

— Kapa
quelle

40

Ich ziehe es vor *zoom:1;, hasLayout zu triger. So ist es klarer, dass die *zoomund zusammen *displaygehen

— yunzen

4

@RoshanWijesena w3schools hat nichts mit w3c zu tun und auch keine Behörden auf ie7

— Musa

1

@RoshanWijesena w3schools ist keine gute Ressource und überhaupt nicht offiziell. Verlassen Sie sich nicht darauf. Die Tatsache, dass sie etwas erwähnen oder nicht erwähnen, bedeutet eigentlich nichts.

— Kapa

1

danke Leute! Also, was soll ich als offizielle Dokumentation verwenden, frage mich nur!

— Roshan Wijesena

2

@RoshanWijesena Die offiziellen Standardspezifikationen finden Sie auf w3.org , der offiziellen Seite von W3C. developer.mozilla.org ist eine großartige Ressource, die Sie anstelle von w3schools als Referenz verwenden können.

— Kapa

8

Aktualisieren

Da niemand mehr IE6 und 7 verwendet, werde ich eine andere Lösung vorstellen:
Sie brauchen keinen Hack mehr, weil IE8 ihn selbst unterstützt

Für diejenigen, die diese steinzeitlichen Browser vor IE8 unterstützen müssen (es ist nicht so, dass der IE8 so alt ist, zu hustend ):
Verwenden Sie für die IE-Versionskontrolle eine bedingte Klasse in <html>Tags, wie es Paul Irish in seinem Artikel angibt

<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->

Auf diese Weise haben Sie verschiedene Klassen im HTML-Tag für verschiedene IE-Browser

Das CSS, das Sie benötigen, lautet wie folgt

.inline-block {
    display: inline-block;
}
.lt-ie8 .inline-block {
    display: inline;
    zoom: 1;
}

Dies wird überprüft und Sie benötigen keine zusätzliche CSS-Datei

Alte Antwort

.frame-header
{
    background:url(images/tab-green.png) repeat-x left top;
    height:25px;
    display:-moz-inline-box;    /* FF2 */
    display:inline-block;   /* will also trigger hasLayout for IE6+7*/
}
/* Hack for IE6 */
* html .frame-header {
    display: inline; /* Elements with hasLayout and display:inline behave like inline-block */
}
/* Hack for IE7 */
* + html .frame-header {
    display: inline; /* Elements with hasLayout and display:inline behave like inline-block */
}

— Yunzen
quelle

Das oben gezeigte CSS ist sinnvoll, aber wie genau würde das im HTML funktionieren? Vielen Dank.

— StephenESC

@StephenESC zwei Möglichkeiten. Fügen Sie die Klasse inline-blockauf das frame-headerElement. Oder ändern , inline-blockindem frame-headerin den CSS - Selektoren.

— Yunzen

1

IE7 unterstützt 'Inline-Block' nicht richtig, weitere Informationen hier: LINK
Use kann stattdessen 'Inline' verwenden.

Was genau versuchst du zu erreichen? Machen Sie uns ein Beispiel und setzen Sie hier: http://jsfiddle.net/

— Iladarsda
quelle

0

Verwenden Sie Inline, es funktioniert mit dieser Art von Selektoren für Listenelemente:

ul li {}

oder um genau zu sein:

ul[className or name of ID] li[className or name of ID] {}

— MiddleKay
quelle

2

inlineist nicht dasselbe wie inline-block. Zum Beispiel wird das height: 25px;im Beispiel nicht wirksam, wenn das Element ist inline. Die Frage sagt auch nichts über Listen aus.

— Kapa