IE 7 et IE 8 ne rendent pas 2 div conséquents avec float: gauche sur la même ligne s'il y a une table dans l'un des DIVs

IE 7 et IE 8 ne rendent pas 2 divs consécutifs avec float: left sur le même ligne s'il y a une table dans l'une des DIV soit 100% + marge largeur non nulle:IE 7 et IE 8 ne rendent pas 2 div conséquents avec float: gauche sur la même ligne s'il y a une table dans l'un des DIVs

 
<html> 
<head> 
<title>IE float left bug</title> 
<style type="text/css"> 
.inttable 
{ 
    width: 100%; 
    margin: 9px; 
} 
.multicolumn 
{ 
    margin: 0px; 
    border: 0px; 
    padding: 0px; 
    width:100%; 
} 
.column 
{ 
    margin: 0px; 
    border: 0px; 
    padding: 0px; 
    float:left; 
    display: inline; 
} 
</style> 
</head> 
<body> 
<div class="multicolumn"> 
    <div class="column" style="width:50%;"> 
     <table class="inttable"> 
      <tr> 
       <td>table1</td> 
      </tr> 
     </table> 
    </div> 
    <div class="column" style="width:50%;"> 
     column 2 
    </div> 
</div> 
</body> 
</html>

Il n'y a pas de problème dans FireFox, Opera, Chrome et Safari.

Est-ce que quelqu'un sait solution de contournement pour ce bug IE?

Source

2009-07-16 Artem

Vous devriez reformuler ceci sous la forme d'une question. –

PS Avez-vous un ensemble de doctype? - Si ce n'est pas le cas, pensez à en définir un car cela résoudra BEAUCOUP de problèmes de rendu IE. – scunliffe

S'il vous plaît, faites-en une réponse :) – Artem

Comme scunliffe mentionné dans son commentaire rendant ce html transitoire ou strict xhtml résout le problème.

Source

2009-07-17 00:09:39 Artem

intéressant, change l'affichage: en ligne; pour afficher: inline-block; faire n'importe quoi?

modifier: ne marche pas faire quoi que ce soit, mais en supprimant la marge: 9px de la table fixe, il

aussi, ajouter des bordures de couleur à tout fait pour le débogage facile

Source

2009-07-16 21:02:13 mkoryak

Non. N'a pas aidé dans IE 7. – Artem

Oui, en supprimant la marge le fixe, mais j'ai besoin de marge dans mon cas. – Artem

Changer margin: 9px; à padding: 9px; résout le problème dans mon cas .

Source

2009-07-16 21:02:22 Artem

Le bug semble être un décalage 1px introduit par le moteur de rendu terrible d'IE. La marge sur la table pousse inévitablement la div floated vers l'extérieur dans IE, donc la solution de travail la plus simple que j'ai trouvée est d'ajouter une marge gauche négative à la deuxième colonne égale à la marge de votre table + 1 px. Donc, dans ce cas, ce serait margin-left:-19px;

C'est un bug bizarre et frustrant. J'espère que cette solution fonctionne pour vous.

Source

2009-07-16 21:49:40

IE 7 et IE 8 ne rendent pas 2 div conséquents avec float: gauche sur la même ligne s'il y a une table dans l'un des DIVs

Répondre

Questions connexes