2012-03-20 50 views
1

子メニュ​​ーにクロムが余分な10ピクセルを表示するのはなぜですか?彼らは親メニューに関して異なった位置をレンダリングするのですか?ここでのCSSは次のとおりです。なぜFirefoxでは正しく表示されますが、Chromeでは正しく表示されません

#nav ul li ul{ 
display: none; 
width: 250px; 
opacity: .7; 
z-index: 999; 

} 

#nav ul li:hover ul{ 
display: block; 
background-color: #444444; 
padding: 0; 
margin: 0; 
position: absolute; 
top: 20px; 
border-top: 19px solid black; 
} 

が行動でそれを参照してください。

http://guardianweb.edulence.com/model3/

+0

しかし、Firefoxはトップを取らない:20px;何らかの理由で。 –

答えて

1

what I can seeに基づいて、ChromeとIE9が適切にページをレンダリングしているように見えますが、Firefoxの11ではありません。 thisはあなたが参照している余分な10ピクセルですか?

個人的には、top: 20pxを削除して、Firefox 11でサブメニューをChromeとIE9と同じにするようにしました。

0

あなたのli:hover ulの上部に19pxのボーダーがあります。このボーダーの高さは測定されません。サブボックス上部には19pxのギャップがあります。また、あなたのstyles.cssの80行目には、#nav ulpadding:10px 0;となっており、それもサブナップに適用されています。あなたのCSSで指定したとおりにすべてのものが表示されます。li

関連する問題