logo标签列表

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

htmlcss
7

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

<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
=========================
的高度等于其字体大小。
2
我在 Mac OS X 上的 Safari 浏览器上得到了 offsetHeight: 20px。你用的是什么浏览器？ - jcaron
尝试添加媒体屏幕。 - Ajay Makwana
非常奇怪。我在Chrome、FF和Safari中进行了测试。Mac OS X Yosemite 10.10.5。我的同事得到了与我相同的结果。如果需要，我可以附上截图。有什么想法吗？ - Alexander
2个回答
0
@media screen and (max-device-width: 460px){
    body{
        -webkit-text-size-adjust: none;
    }
}
0
我认为您可以为 .analized-element 元素添加 line-height: 20px 和 display: inline-block 来解决这个问题。
或者为 body 元素添加 line-height: 1 和 font-size: 20px。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接