当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，而选择＆＃39;标签略微凸起和分离。我不明白为什么会这样做。任何想法如何阻止它？

Answer 1

破解它 - 需要添加：

 vertical-align: top;

到li {}