web-dev-qa-db-fra.com

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 pas dans Internet Explorer 8. Ils ont une mise en page, ce qui ne pose pas de problème et les largeurs sont suffisamment petites pour pouvoir être inséré sur une seule ligne.

Si j'utilise span à la place, cela fonctionne, mais j'aimerais vraiment savoir pourquoi div ne marche pas dans IE

cssinternet-explorer-8
15
csteifel

Les anciennes versions de IE ne comprennent pas le inline-block pour les éléments de niveau bloc.

La raison pour laquelle inline-block fonctionne pour les éléments inline est qu’ils l’ont fait, ce qui déclenche hasLayout. Et la mise en page pour les éléments en ligne fonctionne exactement comme un inline-block.

Donc, pour que inline-block fonctionne avec des éléments de niveau bloc, rendez-les en ligne et déclenchez d'une manière ou d'une autre la hasLayout, comme en utilisant zoom: 1.

Donc, pour votre code, il y a deux façons: changez divs en spans, ou ajoutez des hacks inline (ou déplacez le code vers des feuilles de style externes et utilisez des commentaires conditionnels). La version avec hacks intégrés ressemblerait à 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>
29
kizu

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

vous pouvez ajouter inline-block pour un autre navigateur, mais pour IE vous pouvez ajouter un style avec * cela ne fonctionne que dans ie

3
GeniusJRS

Changer le type de document a fonctionné pour IE

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

IE <8 ne peut pas permuter les éléments qui sont block par défaut en inline-block éléments. Quels que soient vos efforts, ils resteront toujours block sauf si vous utilisez float IIRC.

Dans votre exemple, il semble que vous n’ayez pas besoin d’utiliser un <div>. Si tel 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.

1
Mig

Essaye ça

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