Internet explorer css的问题
这里有一个关于IE的css3下拉菜单问题 使用以下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
/* 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上遇到与上述完全相同的错误。