2011-10-26 1 views
1

私は含まCSSのナビゲーションでこれをTest.htmに参加。私はすべてのブラウザでtestdtとIE9は、サブメニューを表示していない参照してください? firefoxとoperaでサブメニューには既にIE 5 6 7 8とSafariにアクティブリンクとして正しく下線が引かれているところに下線が引かれています。 この簡単なCSSをクロスブラウズするのを手伝ってください! 助けてくれてありがとう 完全なテストファイルhtm):のみinIE9が表示されないサブメニューとCSSメニューのcrossbrowserバージョン、IE5678、FFに示し、SAF、OP

<!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> 
+0

私はQuirksモードにいたとき、私が持っていた唯一の問題だったX64自分のサイト上でこれをテストし、ちょうど#navigationから左と上の属性を削除し、すべてがIE9に取り組みました。 – CBRRacer

答えて

0

移行型である必要がありますか?私は厳密やHTML5のDOCTYPEを使用する場合

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

サンプルが正常に動作します。

関連する問題