2 div 在 IE7.0 与其他浏览器（简化）中看起来不同。怎么修？答案

【问题标题】：2 divs look different in IE7.0 vs other browsers (simplified). How to fix?2 div 在 IE7.0 与其他浏览器（简化）中看起来不同。怎么修？
【发布时间】：2011-11-22 08:44:33
【问题描述】：

我的 html 页面的这一部分（95% 的代码已被删除）在 IE7.0（IE6.0 未测试）与其他浏览器中看起来仍然不同。谁能告诉我如何修复，以便 IE7.0 以与 FF、Opera 等相同的方式显示它？

<html >
<body>
<div style="margin: 0 100px 0 340px;">
    <div style="margin-right: -103px; height:300px; border:1px solid #3c6; float:right;">right is <br>different<br>when use<br>IE7.0. <br>Why?</div>
    <div  style="border:1px solid #c63; height:300px;">middle is OK</div>
</div>
</body>
</html>

这2个div之间应该有一些空间，但IE7.0将它们显示在一起。

【问题讨论】：

标签： internet-explorer cross-browser internet-explorer-7

【解决方案1】：

这是负边距。这是构建内容的一种不寻常的方式，因此您遇到了 IE 处理方式不同的边缘情况。

如果您以更标准的方式构建您的页面（如果不具体了解您要完成的工作，很难推荐更多详细信息），您会遇到这样的边缘情况。

但如果情况要求必须如此，那么您可以将margin-left:44px; 添加到具有负右边距的 div（根据需要调整 44px）。这将导致：

<html>
<body>
<div style="margin: 0 100px 0 340px;">
    <div style="margin-right: -103px; margin-left:44px; height:300px; border:1px solid #3c6; float:right;">right is <br>different<br>when use<br>IE7.0. <br>Why?</div>
    <div style="border:1px solid #c63; height:300px;">middle is OK</div>
</div>
</body>
</html>

【讨论】：