Internet explorer css的问题

Internet explorer css的问题,internet-explorer,css,Internet Explorer,Css,这里有一个关于IE的css3下拉菜单问题 使用以下css: /* Main Navigation */ #nav { list-style: none; margin-left: 30px; margin-right: -30px; z-index: 2000; } #nav li { float: right; position: relative; } #nav a { display: inline-block; height: 80px; line-height: 80px; fo

这里有一个关于IE的css3下拉菜单问题

使用以下css:

/* Main Navigation */

#nav {
list-style: none;
margin-left: 30px;
margin-right: -30px;
z-index: 2000;
}

#nav li {
float: right;
position: relative;
}

#nav a {
display: inline-block;
height: 80px;
line-height: 80px;
font-weight: bold;
font-size: 16px;
color: #eee;
padding: 0px 22px 0px 22px;
text-shadow: rgba(0,0,0,0.1) 0px -1px 1px;
}

#nav li a.nav_tier1:hover, #nav .current_page_item a.nav_tier1 {
    background: transparent url('../img/nav.bg.png') no-repeat center;
}

#nav li a.labs img {
    margin: 0 0 0 6px;
}

/* Sub Navigation */

#nav .nav_2 {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 150px;
    position: absolute;
    top: 80px;
    left: 0;
    z-index: 9999;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

-webkit-box-shadow: 0px 0px 15px rgba(255,255,255,.5);
-moz-box-shadow: 0px 0px 15px rgba(255,255,255,.5);
box-shadow: 0px 0px 15px rgba(255,255,255,.5);

background: #444;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#444), to(#222));
background: -webkit-linear-gradient(#444, #222);
background: -moz-linear-gradient(#444, #222);
background: -ms-linear-gradient(#444, #222);
background: -o-linear-gradient(#444, #222);
background: linear-gradient(#444, #222);
-pie-background: linear-gradient(#444, #222);
behavior: url(/media/htc/PIE.htc);
}

#nav .nav_2 li {
    float: none;
    margin: 0;
    padding: 0;
    list-style: none;

    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#nav .nav_2 li:last-child {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}   

#nav .nav_2 .nav_tier2 a {
display: block;
    height: 50px;
    line-height: 50px;
float: none;
}

#nav li:hover > .nav_2 {
    display: block;
}

*html #nav li:hover /* IE6 */ {
display: block;
}

#nav .nav_2 li a:hover {
    color: #CF982B;
}

/** Triangle Tip **/

#nav .nav_2 li:first-child a:after {
    content: '';
    position: absolute;
    left: 25px;
    top: -15px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 15px solid #444;
z-index: 3000;
}

#nav .nav_2 li:first-child a:hover:after {
border-bottom-color: #444;
}

/** END Triangle Tip **/

/** END Sub Navigation **/

/* Clear floated elements */
#nav:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

*html #nav             { zoom: 1; } /* IE6 */
*:first-child+html #nav { zoom: 1; } /* IE7 */

/** END Main Navigation **/
应用于以下html导航菜单:

<ul id="nav" class="grid_6">
    <li>
        <a href="/labs/" class="nav_tier1">Labs</a>
    </li>
    <li>
        <a href="/contact/" class="nav_tier1">Contact</a>
    </li>
    <li>
        <a href="/blogs/" class="nav_tier1">Blogs</a>
    </li>
    <li>
        <a href="/portfolio/" class="nav_tier1">Portfolio</a>
        <ul class="nav_2">
            <li>
                <a href="/presentations/" class="nav_tier2">Presentations</a>
            </li>
        </ul>
    </li>
</ul>
适用于除IE7/8/9之外的所有浏览器

这在Safari、Chrome、Firefox上非常有效,但在IE7/IE8/IE9上,当我第一次将鼠标悬停在公文包链接上时,演示子菜单项在IE上无法正确显示

只有当我将鼠标悬停在子菜单项的锚定标记中时,菜单项才会正确显示

此外,当我将鼠标悬停在远离子菜单项的位置时,似乎出现了“重影”菜单项问题

当我将鼠标悬停在远离子菜单项的位置时,将显示重影菜单-

第一次加载子菜单项时,其加载不正确,如下所示-


ie6/7不喜欢内联块,您可能需要添加一个外部链接并修改css以获得所需的结果

<!--[if IE 6]><link rel="stylesheet" href="http://mysite.com/path/to/ie6.css" type="text/css" media="screen, projection"><![endif]-->

<!--[if IE 7]><link rel="stylesheet" href="http://mysite.com/path/to/ie7.css" type="text/css" media="screen, projection"><![endif]-->


IE6/7不能很好地处理内联块。您可能想了解一下:这是真的,但我只有一行写着“NAVA”{display:inline block;但这与我面临的问题并没有太大关系。我可能可以解决这个display:inline block;问题,但这并不能帮助我解决我原来的错误*鬼子菜单显示(第一张图片)*初始onhover无法正确加载子菜单(第二张图片)这一行可能是你的问题。另外,:hover在ie6/7中的其他元素上不起作用。它只在那些恐龙的锚定标签上起作用。我之前已经尝试过了。这一行没有改变与这两个bug相关的任何东西。我更关心的是IE8和IE9,而不是ie6或7.7-如果可能的话。6-我甚至不想麻烦。这一点可能会有帮助:虽然我不确定它是否仍然发生在8或9Hi Victor中,但不幸的是内联块不是问题所在。我已经完全禁用了它,但我仍然在IE上遇到与上述完全相同的错误。