Question

考虑以下HTML标记。在我测试过的大多数浏览器中，第二个列表的显示方式不同（每个列表项都缩进）。

两个列表之间的唯一区别与CSS字体样式属性有关，我不希望更改列表布局。这种行为有解释吗？

<!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>

Answer 1

带有直文的范围span的高度变为 18像素，而斜体文本强制span为 19像素即可。

使用float: left时会导致略有不同的行为。

      span // <-- height: 18px;
 .bad span // <-- height: 19px;

快速修复是为两种范围类型设置line height属性相等：

  span {float:left; line-height:15px;}

不是关于代码的意图;）

Answer 2

浏览器选择的sans-serif字体可能有不同的斜体（或没有斜体）。尝试选择像verdana这样的特定字体，看看会发生什么

Answer 3

布局将取决于用于“sans-serif”替换的真实字体。所以你需要选择合适的字体名称。

我认为Windows（7）上所有主流浏览器没有任何差异，请参阅：http://jsfiddle.net/uTjSd/ 看起来“sans-serif”在所有这些中都被解析为“Arial”。

CSS布局随字体样式而变化

3 个答案: