<style type="text/css">
ul {
    margin:0;
    padding:0;
    padding-top: 100px;
    width: 170px; /*宽度改大就没问题*/
    float:left;/*为了在firefox上看上去正确*/
    background: #eee; /*为了方便看效果*/
}
li{
    width: 170px;
    float:left;
}
a:hover{
    background: #000;/*这条不写就不会有问题*/
}
</style>
<ul>
    <li>
        <a href="#">Column 1 SubItem 1</a>
    </li>
</ul>

以上是重现问题的最小代码. 当鼠标移动到链接上后, ul的下面突然多出一块, 多出部分高度是等于ul的padding-top大小, 通过IE8的IE develop tool观察layout发现多出部分是被加到了ul的height里. 如果设置ul的height大小小于li的总大小, 则有问题, 否则OK.
IE7/IE8标准模式, firefox都OK.
在IE6, IE7/IE8的quirks模式下都有问题.

如果把UL的width去掉就没问题.

相信问题出在IE对float情形下, 外围具有宽度的情形下, 对子元素的宽度总和计算出错, 导致认为子元素一行显示不下而要显示到第二行去.
证据是, 当width改到173(为什么171和172不行?)

但似乎background又和IE的layout属性有什么关系?
IE的bug真的是很让人头疼.

更新: 查证确为IE bug, 描述为float元素的宽度之和要小于100%,否则无法正确显示,最好小于99%.