Question

所以我有一个带有悬停/选中状态的菜单，它在IE6 / IE7中正常加载。然而，当我向下滚动页面并将元素放在视口之外然后返回时，我得到一个破碎的图像！我以前从未见过这样的问题。有没有其他人，可以有人建议解决方案。以下是工作和损坏的图像以及实时代码的URL的示例。

alt text http://bjmarine.net/post-load.png - 看到加载

alt text http://bjmarine.net/post-scroll.png - 滚动并进入视口后损坏

我正在使用滑动门方法，在a和css背景图像中有一个跨度

可在@ http://bjmarine.net/samples.htm

找到完整菜单

干杯，丹尼斯

解决方案：

#navigation ul.primary-nav li.selected a.menu-item-hover{height:25px;}
#navigation ul.primary-nav li.top-level.selected a.menu-item-hover span{height:21px;}
* html #navigation ul.primary-nav li.residential.selected a.menu-item-hover{width:88px;white-space:nowrap;}

Answer 1

首先，在检查这样的错误时（更好的是，总是！）验证您的标记和CSS，以确保您正在处理标准代码。如果没有，您将遇到问题。

快速检查您的标记会导致23个错误！ http://validator.w3.org/check?uri=http%3A%2F%2Fbjmarine.net%2Fsamples.htm&charset=%28detect+automatically%29&doctype=Inline&group=0

当然，他们大部分来自HEAD部分，但身体中有一对 - 解决这些问题，然后再试一次。

下一步：即使有错误的标记，常识告诉你向下滚动也不应该影响渲染。那个是一个IE错误，当然，所以毫无疑问，你必须改变你的代码来解决它。

所以：

您的标记无效 - 不要指望怪癖模式解释您的含义。在尝试其他任何事情之前解决这些问题（例如，UL不能为空）
较旧版本的IE不喜欢'＆gt;' CSS选择器。摆脱它并改为使用类。
如果您想要显示内嵌并具有特定高度和宽度的内容，请使用display: inline-block规则，这是正确的选项，而不仅仅是display: block。
您有负利润。这根本不推荐。您通常有很多更好的方法来解决它。

正如您所看到的，许多事情可能会触发该错误。解决所有这些问题（即使没有错误也应该这样做）并再试一次。

如果您还在使用它，请考虑重构您的标记 - 我们可以多次找到变通方法，但有时我们必须适应（我们只是无法远程修复IE错误...）

Answer 2

这听起来像IE浏览器躲猫猫的错误 - 没有具体的建议，但快速谷歌应该提供一些想法。

Answer 3

我认为这与hasLayout问题有关。

我能够通过在样式中引入height属性来修复IE 7中的行为（我的计算机上没有IE 6），以强制IE确认它有布局。

#navigation ul.primary-nav > li.top-level > a.menu-item-hover:hover span, 
#navigation ul.primary-nav > li.top-level:hover > a span,
#navigation ul.primary-nav > li.top-level.selected > a span{
    color:#fff;
    display:block;
    margin:-17px 0 0;
    padding:12px 7px 10px 15px;
    height: 21px;     /* this is what I added, in global.css */
}

不幸的是，一旦在元素上设置高度，垂直位置仍然存在问题。您可以使用top属性，或从margin-top属性中减去更多内容，但要解决此问题。

为什么要将一个元素移出和移回影响它的视口？

3 个答案: