如果其中一个 DIV 中有一个表格，IE 7 和 IE 8 不会在同一行上渲染带有 float:left 的 2 个后续 div
如果其中一个 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 错误的解决方法吗？
IE 7 and IE 8 do not render 2 consequent divs with float:left on the same line if there is a table in one of the DIVs which is 100% width + non-zero margin:
<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>
There is no such problem in FireFox, Opera, Chrome and Safari.
Does anyone know workaround for this IE bug?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
正如 scunliffe 在他的评论中提到的，使这个 html 过渡或严格的 xhtml 解决了这个问题。
As scunliffe mentioned in his comment making this html transitional or strict xhtml solves the issue.
有趣的是，是否改变显示：内联； 显示：内联块； 做任何事情？
编辑：不执行任何操作，但从表格中删除 margin:9px
也可以解决此问题，为所有内容添加彩色边框可以轻松调试
interesting, does changing display: inline; to display: inline-block; do anything?
edit: doesnt do anything, but removing margin:9px from table fixes it
also, adding colored borders to everything makes for easy debugging
将
margin: 9px;更改为padding: 9px;解决了我的问题。Changing
margin: 9px;topadding: 9px;solves the problem in my case.该错误似乎是 IE 糟糕的渲染引擎引入的 1px 偏移。
表格上的边距不可避免地将 IE 中的浮动 div 向外推，因此我发现的最简单的工作解决方案是向第二列添加一个负左边距，等于表格的边距 + 1 px。 所以在这种情况下，它会是
margin-left:-19px;这是一个奇怪且令人沮丧的错误。 希望这个解决方案适合您。
The bug seems to be a 1px shift introduced by IE's terrible rendering engine.
The margin on the table inevitably pushes the floated div outward in IE, so the simplest working solution I've found is to add a negative left margin to the second column equal to your table's margin + 1 px. So in this case it'd be
margin-left:-19px;That's a bizarre and frustrating bug. Hope this solution works for you.