Question

有一种情况我在div中添加了一个带有按钮背景的单个字符。似乎很直接。但是，FF和Safari / Chrome之间的文本放置不同。我创建了一个基本页面，其中包含一个div和一个字符来说明问题。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .testDiv{
                height: 100px;
                width: 100px;
                background: blue;
                color: #fff;
                font-size: 50px;
                font-family: helvetica;
            }
        </style>
    </head>
    <body>

<div class="testDiv">
    1
</div>
</body>
</html>

Answer 1

WebKit和Mozilla似乎对如何处理行高有不同的看法。你最接近的是增加行高：1;在你必须开始使用特定于webkit的属性之前，你的.testDiv规则会有所帮助。

Webkit在单个文本字符上添加不需要的额外空间

1 个答案: