为什么 SPAN 的高度大于其字体大小答案

【问题标题】：Why height of SPAN more than its font-size为什么 SPAN 的高度大于其字体大小
【发布时间】：2016-03-25 06:13:33
【问题描述】：

我不明白为什么 span 元素的高度大于其字体大小（边距和填充 = 0）：JSFiddle example

<head>
    <style>
        .analized-element {
            font-size: 20px;
            font-family: "Lucida Console", "Lucida Grande", monospace;
        }
    </style>

</head>
<body>
    <span class="analized-element">Test message</span>
</body>

此问题仅在 Mac 中存在：

== analized-element =====
border-size: 0 0 0 0
padding: 0 0 0 0
font-size: 20px
offsetHeight: 23px
=========================

我们如何看到有 3 个额外的像素。 在 Windows 中的相同示例：

== analized-element =====
border-size: 0 0 0 0
padding: 0 0 0 0
font-size: 20px
offsetHeight: 20px
=========================

span的高度等于它的font-size。

【问题讨论】：

我在 Mac OS X 上的 Safari 上收到 offsetHeight: 20px。您使用的是哪种浏览器？
尝试添加媒体屏幕
这很奇怪。我在 Chrome、FF 和 Safari 中对其进行了测试。 Mac OS X 优胜美地 10.10.5。我的同事得到了和我一样的结果。如果有必要，我可以附上截图。有什么想法吗？

标签： html css

【解决方案1】：

@media screen and (max-device-width: 460px){
    body{
        -webkit-text-size-adjust: none;
    }
}

【讨论】：

【解决方案2】：

我认为您可以添加： line-height: 20px 和 display:inline-block 用于 .analized-element 元素来解决这个问题要么正文元素的 line-height: 1 和 font-size:20px

【讨论】：