Html 为什么firefox中的子菜单显示正确，而chrome中没有

为什么chrome在子菜单上显示额外的10个像素？相对于父菜单，它们是否呈现不同的位置？以下是css：

#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;
}

在行动中看到它：

基于这一点，Chrome和IE9似乎能够恰当地呈现页面，但Firefox 11却不能。你指的是额外的10个像素吗

就我个人而言，我会删除

top:20px

，让Firefox11呈现与Chrome和IE9相同的子菜单。

基于这一点，Chrome和IE9似乎能够恰当地呈现页面，但Firefox11不能。你指的是额外的10个像素吗

---

就我个人而言，我会放下

top:20px

，让Firefox11将子菜单呈现为与Chrome和IE9相同的效果。

你的

li:hover-ul

顶部有一个19px的边框，这个边框没有测量到盒子的高度，实际上，在你的子AV上方又增加了一个19px的间隙。同样在styles.css的第80行，你会看到

#nav ul

得到

填充：10px 0它也被应用于子AV。在第一个
li
上方填充10px，则在
li:hover ul
上方有一个19px的边框，该边框未测量到框的高度，实际上，在子AV上方添加另一个19px的间隙。同样在styles.css的第80行，你会看到
#nav ul
得到
填充：10px 0它也被应用于子AV。在第一个
li
Chrome上面加上10px的填充，显示的内容与css中指定的内容一模一样。但Firefox并不占据榜首：20px；由于某些原因，Chrome显示的所有内容都与css中指定的内容一模一样。但Firefox并不占据榜首：20px；出于某种原因。