Question

我的css表适用于safari和mozilla但不适用于IE。导航条div图层似乎存在一个特定问题...它是作为一个水平菜单栏构建的，但它在IE上显示为一个垂直菜单栏并将我的flash横幅推到一边。

有关如何解决此问题的任何提示？

css摘录如下

/* Menu */

#menu {
width: 1000px;
height: 46px;
margin: 0 auto;
padding: 0;
background: url(images/img04.jpg) no-repeat left top;
}
#menu ul {
margin: 0;
padding: 0px 0px 0px 48px;
list-style: none;
line-height: normal;
}

#menu li {
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
}


#menu a {
display: block;
height: 32px;
margin-right: 3px;
padding: 14px 30px 0px 30px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #FF9900;
border: none;
}
#menu a:hover, #menu .current_page_item a {
background: #C44203;
}

#menu .current_page_item a {
background: #C44203;
}

#menu a:hover {
background: #C44203;
text-decoration: none;
}

#menu li a{
display: inline-block;
height: 32px;
margin-right: 3px;
padding: 14px 30px 0px 30px;
text-decoration: none;
text-align: center;
line-height: 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #FF9900;
border: none;
}
#menu li a:hover{
background-color: #C44203;  
}   
#menu ul ul{
display: block;
height: 60px;
margin-left:-96px;
left: 50%;
position: absolute;
top: 45px;
visibility: hidden;
}

#menu ul li:hover ul{
visibility: visible;
}

很多，非常感谢维维

Answer 1

试试这个链接...

http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

听起来display: inline-block;仅适用于IE8及以上版本。但该链接为您提供了解决方案，并解释了使用它的好处和后备。

Answer 2

从#menu li中删除 position: relative; 。它将在IE中运行。

Answer 3

到visibility: visible;进入display:block;

和visibility:hidden;加入Display:none;

就像这样

#menu ul ul{
display:none;
}

#menu ul li:hover ul{
display:block;
}

CSS导航条div图层在IE上无法正常显示

3 个答案: