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

【问题标题】：Webkit adding unwanted, additional space above single text characterWebkit 在单个文本字符上方添加不需要的额外空间
【发布时间】：2011-12-02 18:18:33
【问题描述】：

有一种情况，我在带有按钮背景的 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>

【问题讨论】：

字体在几乎每个浏览器引擎中的呈现方式都不同。不要期望像素完美的结果。另外，你怎么知道 Webkit 不准确而 FF 是正确的？就不能反过来吗？
也许行高？我建议使用真正的 css 重置

标签： css firefox safari webkit gecko

【解决方案1】：

WebKit 和 Mozilla 在如何处理行高方面似乎存在分歧。最接近的方法是添加 line-height: 1;在您必须开始使用特定于 webkit 的属性之前，您的 .testDiv 规则将有所帮助。

【讨论】：