Question

我加入此test.htm并包含css导航。我在所有浏览器上测试并看到IE9没有显示子菜单？在Firefox和Opera中，子菜单已加下划线，在IE 5 6 7 8和safari中有正确的下划线作为活动链接.. 请帮我把这个简单的css交叉浏览器！谢谢你的帮助这里是完整的testfile（htm）：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

body {
background-color:#214523;
overflow:hidden;
}   

#centreer {
        position: absolute;
    left: 50%;
    top:  50%;
}

#navigation {
overflow:hidden;
position:relative;
left:-450px;
top:-110px;
z-index:1100;
width: 190px; 
height:400px;
float: left; 
margin-top: 10px; 

font-family: verdana, Helvetica, sans-serif;
font-size: 9pt;
color:#EFFFFE;

}



#navigation ul {
width: 120px;
margin:0px; 
padding:0px; 
background: rgb(33, 59, 56); /* The Fallback */
/*background: rgba(33, 59, 56, 0.65);  */
/*border:#fff solid;
border-width:1px;   */
}

#navigation ul li {
width: 110px;
height:18px;
line-height:18px;
list-style:none;
padding-left:10px;
text-decoration:none ;
color:#EFFFFE;
/* 
border-top:#fff solid;
border-bottom:#fff solid;
*/
border-width:1px;
cursor:pointer;
}  
#navigation ul li a{
text-decoration:none ;
color:#EFFFFE;
}
#navigation ul li:hover {text-decoration:underline;backgroundcolor:#213b38;position:relative;}
#navigation ul li a:hover {text-decoration:underline;}

#navigation ul ul {
display:none;
position:absolute;
left:50px;
top:12px;
width: 140px;
z-index: 2100;

background: rgb(33, 59, 56); /* opaque  */
/* background: rgba(33, 59, 56, 0);*/

}

#navigation ul li:hover ul {display:block;} 
#navigation ul li ul li {white-space:nowrap;text-decoration:none ;}     
#navigation ul ul li a:hover {text-decoration:underline; border:none;}

</style>
<!--[if IE ]>
<style type="text/css">
#navigation ul   {
   background:transparent;
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#75213b38,endColorstr=#7521    3b38);
   zoom: 1; 
} 
</style>
<![endif]-->

</head>
<body>
<div id="centreer">

<div id="navigation">
<ul>
<li><a href="test.htm"> menuchoise 1 </a></li>
<li><a href="test.htm"> menuchoise 2 </a></li>
<li> menuchoise 3
<ul>
<li><a href="test.htm"> submenu 3 choise 1 </a></li>
<li><a href="test.htm"> submenu 3 choise 2 </a></li>
<li><a href="test.htm"> submenu 3 choise 3 </a></li>
<li><a href="test.htm"> submenu 3 choise 4 </a></li>
</ul>
</li>
<li><a href="index.htm"> menuchoise 4 </a></li> 
<li> menuchoise 5
<ul>
<li><a href="test.htm"> submenu 5 choise 1 </a></li>
<li><a href="test.htm"> submenu 5 choise 2 </a></li>
</ul>
</li>
<li><a href="index.htm"> menuchoise 6 </a></li> 
</li>


</ul>

</div>
</div>

</body>
</html>

Answer 1

是否必须是过渡性文档类型？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

当我使用Strict或HTML5 doctype时，示例工作正常。

带有子菜单的CSS菜单的crossbrowser版本只显示在IE9中，显示在IE5678，FF，saf，op中

1 个答案: