为什么在IE这IMG休息悬停状态？(Why does this img break hover st

本网站上的纯CSS导航栏www.seventhheavenvintage.com在WebKit和火狐完美的作品。在IE8和IE9（I不必访问其它版本），用作导航栏的背景的灰度色带PNG的存在某种方式中断的嵌套李的悬停状态。这意味着，当我将鼠标悬停在包含子项的菜单项，当我移动我的光标向下点击一个子项消失。如果我很快但是移动我的光标，它的工作原理。然而，所有这一切都被纠正，当我从网站上移除色带IMG。

我已经试过：

测试的各种z索引规则
换出巴新的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;
}

这似乎是由IE引起处理inline-block不同的方式在版本8和9，可以通过只移动该待解决（或实际上，工作围绕）元素<ul>元件位向上的页面。相对移动的绝对要素，你只需要定义一个负保证金：

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

这种“修复”它IE8。 IE9已经是一个好一点，需要较少的校正，所以当你将其向上3个像素，它已经工作。为了使它看起来稍微好一点，然后你可以还添加了padding-top ，所以那根本绵延进一步上涨，而不是移动整个菜单了。

无论如何，你不会想要移动菜单多达11个像素每一个浏览器，因为这是一个简单的解决方法。要将样式应用到IE8只，而不必与有条件的意见混乱，我们可以简单地使用的许多CSS-有效的方法之一，只选择IE8 ：

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;
}

但是，由于没有CSS-有效的方式将样式应用到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决定不使用你的自定义字体）。