Warum sind inline-block-Elemente nicht richtig angezeigt im Internet Explorer 8?

Ich habe den folgenden code:

<div style='width: 200px; border: 1px solid black;'>
  <div style='display: inline-block; width: 70px; border: 1px solid green;'>
    asdfasdf<br />asdf
  </div>
  <div style='display: inline-block; width: 70px; border: 1px solid green;'>
    asdfasdf<br />were
  </div>
</div>

Zeigt Prima in Firefox und Chrome, aber im Internet Explorer 8 nicht. Sie haben layout, so dass ist nicht das problem, die breiten sind klein genug, dass es passt auf eine Zeile.

Wenn ich <span>s anstelle, es funktioniert, aber ich würde wirklich gerne wissen, warum <div>s nicht im IE funktioniert.

  • Hat dein Dokument eine doctype-Deklaration?
  • Was meinst du mit "funktioniert es nicht?" Was ist den gewünschten Effekt zu erzielen?
  • Ahhh ok naja ich hatte HTML 4 deklariert, da es ein extrem alten Seite anstelle von XHTML oder HTML5
  • HTML5-doctype degradiert anmutig in älteren Browsern. Dein Beispiel sieht das gleiche in der neuesten chrome und ie8.
InformationsquelleAutor csteifel | 2011-07-15
  1. 29

    Den alten IE-Versionen nicht verstehen, die inline-block für block-level-Elemente.

    Der Grund, warum inline-block funktioniert der inline-Elemente ist da, Sie Tat es, so löst es hasLayout. Und der hat das layout für die inline-Elementen funktioniert genau wie ein inline-block.

    Also, um inline-block Arbeit mit block-level-Elemente, machen die inline-und irgendwie auslösen hasLayout, wie, mit zoom: 1.

    Also, für die Sie code, gibt es zwei Möglichkeiten: ändern Sie divs zu spans, oder fügen Sie inline-hacks (oder verschieben Sie den code, um externe stylesheets und verwenden Sie bedingte Kommentare). Die version mit inline-hacks würde wie folgt Aussehen:

    <div style='width: 200px; border: 1px solid black;'>
  <div style='display: inline-block; width: 70px; border: 1px solid green;*display:inline;zoom:1;'>
    asdfasdf<br />asdf
  </div>
  <div style='display: inline-block; width: 70px; border: 1px solid green;*display:inline;zoom:1;'>
    asdfasdf<br />were
  </div>
</div>
    • CSS-hacks funktionierte nicht am IE8 unter Win XP.
    InformationsquelleAutor kizu
  2. 3

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

    können Sie fügen Sie inline-block für andere browser, aber für DH Sie können Stil hinzufügen, mit *. es funktioniert nur im ie

    InformationsquelleAutor GeniusJRS
  3. 2

    Änderung der doc-Typ arbeitete für IE

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    InformationsquelleAutor user2792101
  4. 1

    IE < 8 nicht-Schalter-Elemente, die block standardmäßig inline-block Elemente. Egal wie hart Sie versuchen, Sie wird immer bleiben block es sei denn, Sie verwenden float IIRC.

    In deinem Beispiel scheint es, dass Sie nicht brauchen, um eine <div>. Wenn dies der Fall ist, warum nicht ein <span> oder ein element, das inline standardmäßig. Ansonsten floating ist die Antwort.

    • Das ist nicht wahr. Der IE8 versteht inline-block Anzeige-Modus einwandfrei. Aber IE7 ist gar nicht bewusst, dass Modus. Obwohl Sie emulieren kann inline-block Verhalten durch die Einstellung display auf inline und zwingt layout für ein element (mit vergrößern - Eigenschaft, zum Beispiel).
    • So ist es nicht. IE8 scheint, richtig zu arbeiten mit inline-block ich update meine Antwort.
    • IE8 funktioniert gut mit inline-block, bis Sie anfangen zu verbergen/anzeigen von Elementen innerhalb des inline-block dazu führen würde, dass der übergeordnete Container zu wachsen oder zu schrumpfen.
    InformationsquelleAutor Mig
  5. 0

    Versuchen, diese

    <style type="text/css">
.one {
  width: 200px; 
  border: 1px solid black;
}
.two {
  display: -moz-inline-box; 
  display: inline-block; 
  width: 70px; 
  border: 1px solid green;
}
* html .two {
  display: inline;
}
* + html .two {
  display: inline;
}
</style>
<div class="one">
  <div class="two">
    asdfasdf<br />asdf
  </div>
  <div class="two">
    asdfasdf<br />were
  </div>
</div>
    InformationsquelleAutor yunzen
Schreibe einen Kommentar