IE10 CSS与chrome不同

Question

有问题的网站：http://www.meyersboat.com/

为什么IE 10与其他大多数浏览器相比都可以做到这一点？

它似乎适用于http://www.meyersboat.com/meyers/

铬：

IE 10：

Answer 1

在检查您的代码后，它在OSX上的Firefox中无法正常工作：

<ul id="sub-navigation" style="display: block;">
    <li class="selected"><span><a href="javascript:void(0);">Welcome</a></span></li>
    <li style="width: 662px; margin-top: 28px;"></li>
</ul>

尝试将其更改为：

<ul id="sub-navigation" style="display: block; position:relative;">
   <li class="selected"><span><a href="javascript:void(0);">Welcome</a></span></li>
   <li style="width: 660px; position: absolute; right: 0px; top: 18px;"> </li>
</ul>

1. 我们将<ul>设置为position:relative;，让我们绝对将<li>元素置于其范围内。

2. 然后我们将第二个<li>设置为position:absolute; top:18px; right:0px;。这会根据<ul>的范围而非使用margin-top:28px;将框放置在需要的位置。

3. 我还将第二个<li> width:662px;调整为width:660px;，这打破了布局。

Answer 2

为什么需要空的li元素？如果没有用，只需将其删除即可。

如果确实需要此元素，请将其宽度设置为略小于现在的宽度。

如果你确实需要这个特定的宽度，我有一个可能有帮助的建议：

变化

#sub-navigation li a { padding: 2px 6px; }

要

#sub-navigation li a { padding: 2px 4px; }

为什么呢？我的猜测是它与每个浏览器的微小差异有关，有时可以用不同的像素表达自己。当然，我可能会出错，但仍然会解决您的问题。

Answer 3

兄弟姐妹LI有一个固定的宽度，这引起了问题。我从CSS规则中删除了width属性，它正确对齐：

这是一个常见的错误，我看到人们使用导航相关的布局，假设固定的像素数在显示器上是一致的等等。这就是为什么有些人报告FireFox也无法正常工作。 Chrome在这方面似乎与实际规格略有不同。我说是因为它通常报告它适用于Chrome而不是X浏览器。

另一件事，您正在使用IE 9兼容模式。虽然您的问题实际上不是IE版本问题，但您应该将其从9更改为边缘。这可以确保使用最现代的引擎呈现您的内容。

另请注意，我指示您的脚本正在加载到标记的顶部，您应该将脚本标记移动到标记的底部，以便加载页面并加快渲染速度。对不起Web性能优化对我来说很重要，这是一件很简单的事情。