为什么这个img在ie中停止徘徊状态？ [英] Why does this img break hover state in ie?

问题描述

此网站上的纯CSS导航栏 www.seventhheavenvintage.com 在Webkit和FireFox中无懈可击地工作。在ie8和ie9（我没有访问其他版本）的灰色丝带png作为导航栏的背景的存在不知何故中断了嵌套的li的悬停状态。这意味着，当我将鼠标悬停在具有子项的菜单项上时，当我将光标向下移动以单击一个时，子项就会消失。如果我移动我的光标非常快，但是，它的工作原理。

我尝试过的：

• 测试了各种z-index规则


• 换出了一个jpg的png


• 导航到上面的标题并定位绝对

创建了一个用于同一html / css的准系统导航b $ b

一个提示，可以帮助发现这里发生了什么：如果我将png绝对地定位在更高或更低的点，悬停状态断点也以直接相关的方式移动更高或更低。

以下是相关的HTML：

 < nav class = > 
< img src =img / nav_ribbon_bw.png> 
< img src =../ img / menu_bg_bw.pngstyle =display：none;> <！ - 用于预加载子菜单背景 - > 
< ul> 
< li> 
< a href =index.php>首页< / a> 
< / li> 
< li> 
< a href =javascript：;>关于< span style =font-size：6pt;>& nbsp;&＃9660;< / span> 
< ul> 
< li> 
< a href =company.php>& nbsp;公司< / a> 
< / li> 
< li> 
< a href =team.php> The& nbsp; Team< / a> 
< / li> 
< / ul> 
< / li> 
< li> 
< a href =javascript：;>服务< span style =font-size：6pt;& nbsp;&＃9660;< / span>< 
< ul> 
< li> 
< a href =rental.php>租赁& nbsp;物流< / a> 
< / li> 
< li> 
< a href =event.php>活动& nbsp;& nbsp;& amp;& nbsp;设计 （婚礼）< / a> 
< / li> 
< li> 
< a href =styling.php>支柱& nbsp;造型< / a> 
< / li> 
< li> 
< a href =questions.php>常见问题& nbsp;问题< / a> 
< / li> 
< / ul> 
< / li> 
< li> 
< a href =collection.php>集合< / a> 
< / li> 
< li> 
< a href =publication.php>出版物< / a> 
< / li> 
< li> 
< a href =http://www.blog.seventhheavenvintage.com>博客< / 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-type-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 ，这样它只是进一步向上延伸，而不是移动整个菜单。 p>

无论如何，你不会想要为每个浏览器将菜单移动11个像素，因为这只是一个解决方法。要仅将样式应用于IE8，而不必混淆条件注释，我们可以直接使用许多CSS有效的方法之一来选择IE8 only ：

  nav.main li ul {
 margin- top：-11px; 
 padding-top：11px; 
} 
：root nav.main li ul {
 / *覆盖仅IE8风格;这些样式不适用于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 {
 / *覆盖仅IE8风格;这些样式不适用于IE8 * / 
 margin-top：-3px; 
 padding-top：3px; 
} 
  

添加这些样式会返回导航菜单的完整功能，在IE8（虽然，它已经做了，因为IE8决定不使用您的自定义字体）。

The pure CSS nav bar on this site www.seventhheavenvintage.com works flawlessly in Webkit and FireFox. In ie8 and ie9 (I don’t have access to other versions) the presence of the grey ribbon png that serves as the nav bar’s background somehow interrupts the hover state of nested li’s. This means that when I hover over a menu item that has sub items, when I move my cursor down to click on one, the sub items disappear. If I move my cursor very quickly however, it works. All of this is corrected however, when I remove the ribbon img from the site.

What I’ve tried:

• tested various z-index rules
• swapped out the png for a jpg
• moved the png from the nav to the header above and positioned absolute
• created a barebones nav with the same html/css for a sanity check

A hint that may help in discovering what is going on here: If I absolute position the png higher or lower the point at which the hover state breaks also moves higher or lower in a directly related manner.

Here is the relevant 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>

Here is the relevant 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;
}

解决方案

This seems to be caused by IE handling inline-block elements differently in versions 8 and 9. That can be solved (or actually, worked around) by just moving the <ul> elements a bit up the page. To relatively move an absolute element, you would simply need to define a negative margin:

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

That "fixes" it for IE8. IE9 is already a bit better, and needs less correction, so it already works when you move it up 3 pixels. To make it look a slight bit better, you could then also add a padding-top, so that it simply stretches further up, instead of moving the whole menu up.

Anyway, you wouldn't want to move your menus up 11 pixels for every browser, since this is simply a workaround. To apply the style to IE8 only, without having to mess with conditional comments, we could simply use 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;
}

But, since there is no CSS-valid way to apply styles to IE9 only, the best solution would be to just move the whole menu up 3 pixels (it doesn't look any worse for it). So, the final code would be:

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

Adding those styles returns full functionality of your navigation menu, although it will look a bit less nice in IE8 (although, it already did, since IE8 decided not to use your custom font).

这篇关于为什么这个img在ie中停止徘徊状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！