0

如果其中一个 DIV 中有一个 100% 宽度 + 非零边距的表格，则 IE 7 和 IE 8 不会在同一行使用 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 px。所以在这种情况下margin-left:-19px;

这是一个奇怪而令人沮丧的错误。希望这个解决方案对你有用。

于 2009-07-16T21:49:40.643 回答