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

Question

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

我尝试过的：

• 测试了各种 z-index 规则
• 将 png 换成 jpg
• 将 png 从导航移动到上方的标题并定位到绝对位置
• 使用相同的 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 在版本 8 和 9 中以不同方式处理 inline-block 元素造成的。只需将 <ul> 元素向上移动一点就可以解决（或者实际上可以解决）。要相对移动一个绝对元素，您只需要定义一个负边距：

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

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

无论如何，您不希望为每个浏览器将菜单上移 11 个像素，因为这只是一种解决方法。要将样式仅应用于 IE8，而不必弄乱条件 cmets，我们可以简单地使用 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 决定不使用您的自定义字体）。