Question

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

IE（悬停时）：

FF / Chrome（悬停时）：

这里没什么好看的，有些css，onmouseover / onmouseout Javascript来设置style.display = block / none。我已将此answer中的一些想法发送到a similar question。

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

子菜单ul元素上显示：none。看起来IE在绘制边框之前不打算绘制边框：块设置，并且在使用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>

更新：问题确实是一个doctype问题。添加过渡或严格的doctype可以解决问题。链接页面已使用修复程序进行了更新。

Answer 1

如评论中所述，您似乎缺少doctype。

Oldie但是好东西：

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

Answer 2

正如我在原始问题的评论中发布的那样，您链接的页面上的示例肯定没有在代码中列出的doctype。我建议添加一个doctype，它应该可以解决你的问题。

我已经在jsfiddle上创建了你的例子并在IE6-IE9上进行了测试，它似乎工作正常：http://jsfiddle.net/fordlover49/FpCEW

它们包含一个包含所有网页的有效doctype，看起来效果很好。

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

使用display：none时缺少IE CSS边框

2 个答案: