html - 当 li 内的 div 向下移动时 ul 高度扩展

Question

我正在尝试在页面顶部创建一些选项卡。我有一个 ul li div/div/li/ul。将 div 向下放置以与 ul 的底部边框重叠以提供制表符效果:

这是 HTML

<ul>
<li><a href="/thistab">not selected</a></li>
<li id="selected"><div id="innerselected"><span>selected</span></div></li>
<li><a href="/thistab">not selected</a></li>
</ul>

这是 CSS:

<style type="text/css"> 
ul {
border-bottom: 1px solid DarkRed;
}
li {
display: inline-block;
margin-left: 1px
}
#selected {
border-left: 1px solid DarkRed;
border-top: 1px solid DarkRed;
border-right: 1px solid DarkRed;
}
li a {
display: block;
padding: 2px 5px;
border-top: 1px solid #666666;
border-right: 1px solid #666666;
border-left: 1px solid #666666;
text-decoration: none;
background: gainsboro
}   
#innerselected {
padding: 2px 5px;
background: White;
position: relative;
bottom: -2px
}
#innerselected * {
position: relative;
bottom: 2px
}
</style>

在 IE8、Safari 和 Chrome 中它看起来符合预期。

在 IE9+ 和 Firefox 中，ul 高度会扩展以容纳移位的 div，使“选定”选项卡略微升高并分离。我不明白为什么它会那样做。有什么想法可以阻止它吗？

Answer 1

破解了-需要补充:

 vertical-align: top;

到里{}