考虑以下 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 像素，而 italic 文本强制 span 到 19 像素。
这会在使用 float: left 时导致稍微不同的行为。
span // <-- height: 18px;
.bad span // <-- height: 19px;
一个快速修复是将两种跨度类型的行高属性设置为相等:
span {float:left; line-height:15px;}
与您的代码的意图无关；)
关于html - CSS布局随字体样式变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6626643/