在IE7(或IE7模式下更高版本的Internet Explorer)上查看以下代码:
<!DOCTYPE html>
<html>
<head>
<style>
ol, li
{
margin: 0;
padding: 0;
list-style: none;
}
li
{
background: yellow;
}
li table
{
background: red;
margin: 0;
padding: 0;
border: none;
}
</style>
</head>
<body>
<ol>
<li>
<table cellpadding="0" cellspacing="0" border="0"><tr><td>test</td></tr></table>
</li>
<li>
<table cellpadding="0" cellspacing="0" border="0"><tr><td>test</td></tr></table>
</li>
</ol>
</body>
</html>
在每个LI的底部添加一个空格。知道为什么吗?如何移除多余的空间?
注意:我尝试使用display:list-item的DIV而不是LI，我也可以这样重现问题。
IE有一个习惯，当它不应该呈现空白。更改此实例:
</table>
</li>
:
</table></li>
根据Adrift的答案，在LI和zoom: 1上设置vertical-align: bottom将达到目的，而没有Adrift的解决方案可能产生的副作用。
事实上，我相信zoom: 1可以被任何赋予LI布局的属性所取代，参见MSDN。