使用显示时缺少 IE CSS 边框：无答案

【问题标题】：IE CSS border missing when using display:none使用显示时缺少 IE CSS 边框：无
【发布时间】：2011-12-29 03:57:54
【问题描述】：

在 Internet Explorer（我已在所有 v6 - v9 中测试）中，当您将鼠标悬停在文本上时，子菜单上的边框最初不会出现。第二次悬停时将显示。它在 Firefox 和 Chrome 中运行良好 - 即它始终显示边框。我在my site 上放了一个示例页面。

IE（悬停时）：

FF/Chrome（悬停时）：

这里没有什么花哨的，一些 css，onmouseover/onmouseout Javascript 来设置 style.display = block/none。我遵循了answer 到a similar question 中的一些想法。

我已将其精简到最低限度以尝试找出问题，但仍然没有运气。

子菜单 ul 元素上设置了 display:none。似乎 IE 在设置了 display:block 之前不会费心绘制边框，并且在使用 Javascript 显示元素时最初不会绘制它。

<html>
<head>

    <title></title>
    <style type="text/css">
    ul, li                      {padding:0; margin:0; border:0;}
    ul#hover_menu_list, 
    ul#hover_menu_list ul       {list-style-type:none;}
    ul#hover_menu_list li       {float:left;position:relative;display:inline;}
    ul#hover_menu_list li ul    {border:1px solid #000;display:none;position:absolute;left:0px;top:20px;width:170px;}
    ul#hover_menu_list li ul li {display:block; clear:left; float:left;width:140px;}
    </style>
</head>
<body>
    <ul id="hover_menu_list" onmouseout="document.getElementById('menu1').style.display='none';" onmouseover="document.getElementById('menu1').style.display='block';">
        <li>
            Menu
            <ul id="menu1">
                <li>Submenu1</li>
                <li>Submenu2</li>
            </ul>
        </li>
    </ul>   
</body>
</html>

更新：问题确实是文档类型问题。添加过渡或严格的文档类型可以解决问题。链接页面已通过修复更新。

【问题讨论】：

在我的测试中，它似乎在 IE6-IE9 上运行良好，请参阅此处的小提琴：jsfiddle.net/fordlover49/FpCEW 我建议检查您的文档类型以确保它是符合 w3c 的文档类型。
它在 jsfiddle 中确实有效——但我怀疑他们正在做一些事情来修复它。如果您查看 IE 中的示例页面 ianchanning.com/ie-border-bug，您应该会看到该错误。没有设置 DOCTYPE。
我认为 jsfiddle 在“修复”您的代码方面做得并不多。这就是重点......
确实是缺少的文档类型。但我也想知道你为什么使用 JS，而不仅仅是使用 :hover 伪类：jsfiddle.net/XCXhE
@ptriek 不能在触摸屏上工作...

标签： html css internet-explorer

【解决方案1】：

如评论中所述，您似乎缺少文档类型。

老了，但很好：

http://www.alistapart.com/articles/doctype/

【讨论】：

谢谢你，但添加文档类型似乎没有帮助
@icc97 - 在我提到的 cmets 中，它可以在本地工作，但我的本地副本有一个 doctype。删除文档类型会使它像在线一样失败......它没有文档类型。 Mathletics 是正确的，也许由于缓存的原因它对您不起作用，您需要刷新再试一次。
@icc97 Rob 是对的；您的页面尚未显示文档类型。检查来源！
确实，正确，我在本地副本和在线版本之间混淆了

【解决方案2】：

正如我在原始问题的 cmets 中发布的那样，您链接的页面上的示例绝对没有在代码中列出任何文档类型。我建议添加一个文档类型，它应该可以解决您的问题。

我在这里的 jsfiddle 上创建了您的示例，并在 IE6-IE9 上对其进行了测试，它似乎工作正常：http://jsfiddle.net/fordlover49/FpCEW

他们的所有页面都包含一个有效的文档类型，并且看起来工作正常。

也就是说，您可以在 css 中使用伪 :hover 项目，但是 :hover 在旧版本的 IE 中无法始终如一地工作，因此如果不添加一些额外的代码来添加，这可能不是一个选项支持它（也许modernizer支持这个）。

【讨论】：