请考虑以下HTML标记.在我测试过的大多数浏览器中,第二个列表的显示方式不同(每个列表项都缩进).
两个列表之间的唯一区别与CSS font-style属性有关,我不希望更改列表布局.这种行为有解释吗？
<!DOCTYPE html>
<html>
<head>
<style>
body {font-family: sans-serif}
span {float: left}
ul.bad span {font-style: italic}
</style>
</head>
<body>
<ul>
<li><span>foo</span></li>
<li><span>foo</span></li>
<li><span>foo</span></li>
<li><span>foo</span></li>
</ul>
<ul class="bad">
<li><span>foo</span></li>
<li><span>foo</span></li>
<li><span>foo</span></li>
<li><span>foo</span></li>
</ul>
</body>
</html>
span直文本的跨度高度变为18 像素，而斜体文本则强制span为19 像素。
这会导致使用时的行为略有不同float: left。
span // <-- height: 18px;
.bad span // <-- height: 19px;
一个快速解决方法是将line height两种跨度类型的属性设置为相等：
span {float:left; line-height:15px;}
不考虑您的代码的意图；）