为什么 IE9 不将 Orange div 放在 Blue 旁边？ div 在其他更文明的浏览器(如 Chrome 或 Firefox)中呈现得很好。宽度值完美匹配，包括边距，但需要额外的 4 个像素才能从中移除。 Gray div，以便在 IE9 中使 Orange 出现在 Blue 旁边(在 右侧留下 4 个像素的间隙>橙色当然是一个)。
<div style="margin-top: 100px; background-color: GreenYellow; width: 740px; height: 100px; padding: 0px; overflow: visible;">
<div style="background-color: CadetBlue; width: 210px; height: 100px; margin: 0px; padding: 0px; float: left; overflow: visible;">
</div>
<div style="background-color: Black; width: 100px; height: 100px; margin: 0px 0px 0px 4px; padding: 0px; float: left; overflow: visible;">
</div>
<div style="background-color: FireBrick; width: 318px; height: 100px; margin: 0px 0px 0px 4px; padding: 0px; float: left; overflow: visible;">
<div style="background-color: LightSalmon; width: 318px; height: 48px; margin: 0px; padding: 0px; overflow: visible;">
<!-- Gray -->
<div style="width: 214px; height: 48px; margin: 0px 0px 0px 0px; padding: 0px; float: left; background-color: #333333; overflow: visible;">
</div>
<!-- Blue -->
<div style="width: 48px; height: 48px; margin: 0px 0px 0px 4px; padding: 0px; float: left; background-color: #00A8EC; overflow: visible;">
</div>
<!-- Orange -->
<div style="width: 48px; height: 48px; margin: 0px 0px 0px 4px; padding: 0px; float: left; background-color: Orange; overflow: visible;">
</div>
</div>
<div style="background-color: Gainsboro; width: 318px; height: 48px; margin: 4px 0px 0px 0px; padding: 0px; overflow: visible;">
</div>
</div>
<div style="background-color: Purple; width: 100px; height: 100px; margin: 0px 0px 0px 4px; padding: 0px; float: left; overflow: visible;">
</div>
</div>
那么我该如何解决这个问题呢？快要死了...
fiddle :http://jsfiddle.net/LE6cy/
更新
好吧，我不知道这会影响它，但在这些 div 之前我在页面上还有一件事。这是一张普通的 table 。似乎一旦表在那里，就会出现错误。所以这里是整个 HTML 页面(真实的):
<table id="signature" cellspacing="4" cellpadding="0" style="width: 750px; height: 100px; border: 0px;">
<tr>
<td rowspan="2" style="height: 100px; width: 210px; background-color: #336666;">
</td>
</tr>
</table>
<div style="margin-top: 100px; background-color: GreenYellow; width: 740px; height: 100px; padding: 0px; overflow: visible;">
<div style="background-color: CadetBlue; width: 210px; height: 100px; margin: 0px; padding: 0px; float: left; overflow: visible;">
</div>
<div style="background-color: Black; width: 100px; height: 100px; margin: 0px 0px 0px 4px; padding: 0px; float: left; overflow: visible;">
</div>
<div style="background-color: FireBrick; width: 318px; height: 100px; margin: 0px 0px 0px 4px; padding: 0px; float: left; overflow: visible;">
<div style="background-color: LightSalmon; width: 318px; height: 48px; margin: 0px; padding: 0px; overflow: visible;">
<!-- Gray -->
<div style="width: 214px; height: 48px; margin: 0px 0px 0px 0px; padding: 0px; float: left; background-color: #333333; overflow: visible;">
</div>
<!-- Blue -->
<div style="width: 48px; height: 48px; margin: 0px 0px 0px 4px; padding: 0px; float: left; background-color: #00A8EC; overflow: visible;">
</div>
<!-- Orange -->
<div style="width: 48px; height: 48px; margin: 0px 0px 0px 4px; padding: 0px; float: left; background-color: Orange; overflow: visible;">
</div>
</div>
<div style="background-color: Gainsboro; width: 318px; height: 48px; margin: 4px 0px 0px 0px; padding: 0px; overflow: visible;">
</div>
</div>
<div style="background-color: Purple; width: 100px; height: 100px; margin: 0px 0px 0px 4px; padding: 0px; float: left; overflow: visible;">
</div>
</div>
最佳答案
您的标记中是否设置了文档类型？我做了一个 fiddle http://jsfiddle.net/LE6cy并且我看到 IE9 和 Firefox 的类似呈现。 Jsfiddle 有 <!doctype html>在结果 iframe 中默认设置。
关于css - IE9 中错误的简单 div 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13395313/