Question

我在另一个div中有一个相对定位的div。 inside-div的位置为百分比（左：0％;顶部：13％）。

我的问题是，在所有IE版本中，div显示的某些像素比Chrome在Chrome或FF中显示的位置更低......

有人认识到这一点吗？

   <div class="nav_container" id="nav_container">
   <div id="nav_container2" style="position: relative; left: 0%; top: 13%;"></div>
   </div>

另外，我正准备浏览器调整我的网站，以便了解一些关于IE最常见问题的文章。

由于

更新：

这是主要div的样式。

.nav_container {
    background-image: url(../Graphics/menu_lvl1.gif);
    height: 101px;
    width: 720px;
}

Answer 1

我的猜测是IE渲染填充/边距的方式与Chrome / Firefox不同（这通常是布局错误的问题）。

当位置很重要时，您最好同时指定padding和margin，否则您将其保留为浏览器默认值（这些都是不同的）。

您还应该确保IE页面没有加载到Quirks模式。绝对确保在页面顶部有正确的DOCTYPE定义，以强制IE加载到标准模式。 W3Schools对于在何处以及如何使用它有一个很好的概述：

W3Schools - HTML doctype declaration

然后W3C列出了所有有效声明：

W3C QA - Recommended list of Doctype declarations you can use in your Web document

如果没有人处理它，您可以创建特定于IE版本的CSS并使用条件注释加载它们。这将允许您为基于IE的top指定不同的值。

Answer 2

@Camran

这里你去兄弟我希望这可以帮助你。 http://www.positioniseverything.net/articles/cc-plus.html一切都非常详细，易于理解。相信我，我遇到了同样的问题，杀死我的是我与之交谈的每个人，他们声称他们是专业人士，他们说这是完全定位的不可能性，但是这里有人提出了解决方案。

Answer 3

确保IE未在怪癖模式下运行。当您在doctype声明之前有任何文本时会发生这种情况。如果它处于怪癖模式，它对CSS的行为很可怕。比平常更好。

Answer 4

使用conditional comments定位IE并相应地更改top。

IMO，这是解决IE问题所需要了解的一件事。

Answer 5

您使用的是css重置吗？（http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/）它可以帮助您确保所有浏览器都以相同的默认填充和边距开头。

Answer 6

尝试reset stylesheet，看看是否有帮助。在任何其他CSS声明之前包括它。

为什么这个相对定位div在IE中的显示方式不同？

6 个答案: