IE 7とIE 8は2つの結果のdivをfloatでレンダリングしません：DIVの1つにテーブルがある場合、同じ行に残ります

IE 7とIE 8はfloatで2つの結果divを表示しません：ラインであるdiv要素の一つのテーブルがある場合、100％の幅+非ゼロマージン：IE 7とIE 8は2つの結果のdivをfloatでレンダリングしません：DIVの1つにテーブルがある場合、同じ行に残ります

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

FireFoxの、オペラ座、ChromeとSafariでそのような問題はありません。

このIEバグの回避策を知っている人はいますか？

出典

2009-07-16 Artem

これは質問の形で言い換えてください。 –

PS doctypeがありますか？ - そうでない場合は、IEレンダリングの多くの問題を解決するために1つを設定することを検討してください。 – scunliffe

してください、それを答えてください:) – Artem

scunliffeがコメントしたように、このhtml過渡的または厳密なxhtmlは問題を解決します。

出典

2009-07-17 00:09:39 Artem

興味深いことに、変更表示：インライン;表示する：inline-block;何でもする？

編集：何もしますが、余裕を削除するdoesntの：テーブルから9pxは

も、すべてに色の境界線を追加すると、簡単なデバッグになり

出典

2009-07-16 21:02:13 mkoryak

いいえ。 – Artem

はい、余白を削除すると修正されますが、私の場合は余裕が必要です。 – Artem

padding: 9px;にmargin: 9px;を変更すると、私の場合には、問題を解決し、それを修正。

出典

2009-07-16 21:02:22 Artem

このバグは、IEのひどいレンダリングエンジンによって導入された1ピクセルシフトのようです。

テーブルの余白は浮動小数点型のdivをIEで外側に押し出すため、テーブルの余白+ 1pxに等しい負の左余白を2番目の列に追加するのが最も簡単な解決策です。したがって、この場合はmargin-left:-19px;

これは奇妙で不満なバグです。このソリューションがうまくいくことを願っています。

出典

2009-07-16 21:49:40

IE 7とIE 8は2つの結果のdivをfloatでレンダリングしません：DIVの1つにテーブルがある場合、同じ行に残ります

答えて

関連する問題