internet-explorer - CSS 问题

Question

这是 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 上正确显示。

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

此外，当我将鼠标悬停在子菜单项之外时，似乎会出现“重影”菜单项问题。

当我将鼠标悬停在远 ionic 菜单项时出现幽灵菜单 -

第一次加载子菜单项时，它加载不正确，就像这样 -

Answer 1

ie6/7 不喜欢内联 block ，您可能需要添加外部链接并稍微修改 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]-->