IE afficher le bloc en ligne

Donc je fais comme si

<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>

Maintenant dans firefox et chrome, il affiche très bien mais dans internet explorer 8, il ne le fait pas. Ils ont mise en page, de sorte que n'est pas le problème, et les largeurs sont assez petit pour qu'il s'adapte sur une seule ligne.

Si j'utilise span au lieu de cela, il fonctionne, mais je voudrais vraiment connaître pourquoi div de ne pas travailler dans IE

source d'informationauteur csteifel

  1. 28

    Les anciennes versions d'IE ne comprends pas la inline-block pour les éléments de niveau bloc.

    La raison pour laquelle inline-block fonctionne pour les éléments en ligne est parce qu'ils n'ont sorte qu'il déclenche hasLayout. Et l'a mise en ligne des éléments œuvres exactement comme un inline-block.

    Donc, pour faire inline-block travailler avec les éléments de niveau bloc, faire en ligne et en quelque sorte de déclencher le hasLayoutcomme, à l'aide de zoom: 1.

    Donc, pour vous code, il y a deux façons: changement divs à spans, ou ajouter inline hacks (ou déplacer le code des feuilles de style externes et d'utiliser les commentaires conditionnels). La version en ligne hacks devrait ressembler à ceci:

    <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>
  2. 3

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

    vous pouvez ajouter inline-block pour les autres navigateur, mais pour IE, vous pouvez ajouter du style avec *. il ne fonctionne que sous ie

  3. 2

    La modification de la doc type travaillé pour IE

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

    IE < 8 ne peut pas commuter les éléments qui sont block par défaut pour inline-block éléments. N'importe comment dur vous essayez, ils resteront toujours block sauf si vous utilisez float IIRC.

    Dans votre exemple, il semble que vous n'avez pas besoin d'utiliser un <div>. Si c'est le cas, pourquoi ne pas utiliser un <span> ou un élément qui est inline par défaut. Sinon, floating est la réponse.

  5. 0

    Essayer cette

    <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>