0

IE7とIE8は、DIVの1つに100％幅+ゼロ以外のマージンのテーブルがある場合、float：leftを使用して2つの結果のdivをレンダリングしません。

<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、Opera、Chrome、Safariではそのような問題はありません。

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

4

4 に答える 4

1

彼のコメントで scunliffe が述べたように、この html をトランジショナルまたは厳密な xhtml にすることで問題が解決します。

于 2009-07-17T00:09:39.750 に答える
0

興味深い、表示の変更はありますか：インライン; 表示するには：インラインブロック; 何でもする？

編集：何もしませんが、テーブルからmargin：9pxを削除すると修正されます

また、すべてに色付きの境界線を追加すると、デバッグが容易になります

于 2009-07-16T21:02:13.250 に答える
0

私の場合、問題を解決するために変更margin: 9px;します。padding: 9px;

于 2009-07-16T21:02:22.063 に答える
0

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

テーブルの余白は必然的にフローティング div を IE で外側に押し出すため、私が見つけた最も簡単な解決策は、テーブルの余白 + 1 ピクセルに等しい負の左余白を 2 列目に追加することです。したがって、この場合は次のようになりますmargin-left:-19px;

それは奇妙でイライラするバグです。この解決策がうまくいくことを願っています。

于 2009-07-16T21:49:40.643 に答える