Question

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

我尝试了什么：

测试了各种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;
}

那＆＃34;修复＆＃34;它适用于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决定不使用你的自定义字体）。

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

1 个答案: