css - 为什么这个 img 在 ie 中打破悬停状态？

Question

本站纯CSS导航栏www.seventhheavenvintage.com在 Webkit 和 FireFox 中完美运行。在 ie8 和 ie9(我无法访问其他版本)中，作为导航栏背景的灰色丝带 png 的存在以某种方式打断了嵌套 li 的悬停状态。这意味着当我将鼠标悬停在具有子项的菜单项上时，当我向下移动光标以单击其中一个时，子项就会消失。但是，如果我非常快速地移动光标，它就会起作用。然而，当我从网站上删除 ribbon img 时，所有这些都得到了纠正。

我尝试过的:

• 测试了各种 z-index 规则
• 将 png 替换为 jpg
• 将 png 从 nav 移动到上面的标题并定位为绝对
• 使用相同的 html/css 创建了一个准系统导航以进行完整性检查

可能有助于发现此处发生的事情的提示:如果我将 png 绝对定位为更高或更低，悬停状态中断的点也会以直接相关的方式移动更高或更低。

这是相关的 HTML:

<nav class="main">
    <img src="img/nav_ribbon_bw.png">
    <img src="../img/menu_bg_bw.png" style="display:none;"> <!-- for preloading submenu backgrounds -->
    <ul>
        <li>
            <a href="index.php">Home</a>
        </li>
        <li>
            <a href="javascript:;">About<span style="font-size: 6pt;">&nbsp;&#9660;</span></a>
            <ul>
                <li>
                    <a href="company.php">The&nbsp;Company</a>
                </li>
                <li>
                    <a href="team.php">The&nbsp;Team</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="javascript:;">Services<span style="font-size: 6pt;">&nbsp;&#9660;</span></a>
            <ul>
                <li>
                    <a href="rental.php">Rental&nbsp;Logistics</a>
                </li>
                <li>
                    <a href="event.php">Event&nbsp;Planning&nbsp;&amp;&nbsp;Design&nbsp;(Weddings)</a>
                </li>
                <li>
                    <a href="styling.php">Prop&nbsp;Styling</a>
                </li>
                <li>
                    <a href="questions.php">Frequently&nbsp;Asked&nbsp;Questions</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="collection.php">Collection</a>
        </li>
        <li>
            <a href="publication.php">Publications</a>
        </li>
        <li>
            <a href="http://www.blog.seventhheavenvintage.com">Blog</a>
        </li>
        <li>
            <a href="javascript:;" class="simpleCart_checkout">Contact</a>
        </li>
    </ul>
</nav>

这是相关的 CSS:

nav.main {
    width: inherit;
    height: 40px;
    margin: 0px 0px 32px 0px;
    position: relative;
    float: left;
}
nav.main > img {
    width: 1102px;
    position: absolute;
    top:0px;
    left: -71px;
    display: block;
}
nav.main ul {
    list-style-type: none;
    text-align: center;
}
nav.main ul li {
    display: inline-block;
    position: relative;
    margin: 0px 3px;
}
nav.main a {
    display: block;
    height: 40px;
    padding: 0px 14px;
}
nav.main li ul {
    display: none;
    text-align: left;
}
nav.main li:hover ul {
    display: block;
    position: absolute;
    z-index: 10;
    background-image: url('../img/menu_bg_bw.png');
    background-size: 4px 40px;
    border-radius: 3px;
}

Answer 1

这似乎是由 IE 处理 inline-block 引起的元素在版本 8 和 9 中有所不同。这可以通过移动 <ul> 来解决(或者实际上，变通)页面上的元素。要相对移动绝对元素，您只需要定义一个负边距:

nav.main li ul {
    margin-top:-11px;
}

为 IE8“修复”它。 IE9 已经好一点了，需要的校正更少，所以当你向上移动 3 个像素时它已经可以工作了。为了让它看起来稍微好一点，你还可以添加一个 padding-top , 这样它就可以简单地向上延伸，而不是将整个菜单向上移动。

无论如何，您不会希望针对每个浏览器将菜单向上移动 11 像素，因为这只是一种变通方法。要仅将样式应用于 IE8，而不必弄乱条件注释，我们可以简单地使用 one of the many CSS-valid ways to select IE8 only :

nav.main li ul {
    margin-top: -11px;
    padding-top: 11px;
}
:root nav.main li ul {
    /*Override the IE8-only style; these styles won't apply to IE8*/
    margin-top: initial;
    padding-top: initial;
}

但是，因为有 no CSS-valid way仅将样式应用于 IE9，最好的解决方案是将整个菜单向上移动 3 个像素(它看起来并没有变得更糟)。因此，最终代码将是:

nav.main li ul {
    margin-top: -11px;
    padding-top: 11px;
}
:root nav.main li ul {
    /*Override the IE8-only style; these styles won't apply to IE8*/
    margin-top: -3px;
    padding-top: 3px;
}

添加这些样式会返回导航菜单的全部功能，尽管它在 IE8 中看起来会不那么漂亮(尽管它已经做到了，因为 IE8 决定不使用您的自定义字体)。