0

我有一个使用css转换为块的链接，如下所示：

.button-user-add {
    background: green;
    width: 150px;
    height: 24px;
    display: block;

    float: right;
    text-align: center;
    color: #fff;

    text-transform: uppercase;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;

    font-family: Arial;

    line-height: 24px;

    margin-top: 24px;
    padding: 0px;

}

但问题是顶部的填充比底部的填充少大约 1px。

为什么？

我该如何解决？

4

1 回答 1

4

font-size:15pxArial 不存在。浏览器将四舍五入为 14 像素或 16 像素。

（更正：现代浏览器现在呈现更广泛的字体大小，包括更多奇数大小。这是一个快速演示，显示 Arial 12px 到 22px。）

文本的主要部分（大写字母 H 占据的空间）是基线高度。其上方是升序（用于大写字母的重音符号），下方是降序（用于 yp 和 q 等字母的底部）。

font-size = ascender + baseline height + descender

line-height 为要呈现的字体保留空间，但在该空间内呈现文本的确切位置因字体系列、字体大小、浏览器和（如果没有明确的 line-height）而异浏览器使用的默认行高。在行高内，文本将大致但不完全居中。

只要有明确的行高，文本的位置在不同浏览器之间的差异通常不超过 1px，至少对于 Arial 而言。但是没有办法强制浏览器比这更一致地呈现文本。

于 2012-08-09T10:48:58.233 回答