2 div 在 IE7.0 与其他浏览器中看起来不同（简化）。如何修复？

发布于 2024-12-17 10:59:14 字数 563 浏览 0 评论 0原文

我的 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>

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

原文

This part of my html page (95% of code was removed) still looks different in IE7.0 (IE6.0 was not tested) vs other browsers. Could anybody tell me how to fix so IE7.0 displays it the same way as FF, Opera and others?

<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>

That 2 divs should have some space in beetween, but IE7.0 shows them together.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦中的蝴蝶 2024-12-24 10:59:14

这是负边际造成的。这是一种有点不寻常的内容结构方式，因此您遇到了 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>

It's the negative margin that's doing it. That is a bit of an unusual way to structure your content, so you're hitting an edge case that IE handles differently.

If you structure your page in a more standard way (it is hard to recommend how with more details without knowing specifically what you are trying to accomplish) you will run into less edge cases like this.

But if circumstances dictate that this is the way it has to be, then you can add margin-left:44px; to the div with a negative right margin (tweak 44px as needed). That would result in:

<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>

回复收藏 0 原文

~没有更多了~