CSS 布局随字体样式改变

Question

CSS 布局随字体样式改变

5

考虑以下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>

- Josh Johnson

1

什么浏览器？布局有什么不同？我在提供的代码中在Firefox中看不到任何区别，除了斜体文本。 - Jared

1

不确定是什么原因导致的，但是移除 span {float:left} 将会解决缩进问题。 - kei

@Jrod - 我在FF 5中看到底部列表错开了（每个连续的foo向右更远）。 - E.Z. Hart

3个回答

0

可能浏览器选择的无衬线字体斜体（或无斜体）不同。尝试选择特定的字体，如Verdana，然后查看会发生什么。

- Rodolfo

0

布局将取决于用于“sans-serif”替换的实际字体。因此，您需要选择适当的字体名称。

我在Windows（7）上的所有主要浏览器中都没有看到任何差异，请参见：http://jsfiddle.net/uTjSd/ 它似乎在所有浏览器中都将“sans-serif”解析为“Arial”。

- c-smile

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Caspar Kleijne · Accepted Answer

带有直接文本的span高度为18像素，而斜体文本会使span高度变为19像素。这会在使用float: left时导致略微不同的行为。

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

一个快速解决方案是将行高属性设置为两种类型都相等：

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

不考虑你代码的意图 ;)