为什么 IE9 不能将 div 放在Orange
div 旁边Blue
?div 在其他更文明的浏览器中渲染得很好,比如 Chrome 或 Firefox。宽度值完美匹配,包括边距,但是需要从例如Gray
div 中删除额外的 4 个像素,以使IE9 中Orange
出现在旁边的(当然,Blue
在右侧留下 4 像素间隙Orange
)。
<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>
那么我该如何解决呢?这太痛苦了 ...
小提琴:http: //jsfiddle.net/LE6cy/
更新
好的,我不知道这会影响它,但是我在这些 div 之前的页面上还有一件事。这是一张普通的桌子。似乎一旦表在那里,就会出现错误。所以这是整个 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>