当前位置: 首页 > 知识库问答 >
问题:

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

关玄裳
2023-03-14

我不明白为什么 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个答案

呼延河
2023-03-14

我认为您可以添加:行高:20px和显示:.analized元素元素的内联块以解决此问题或行高:1和字体大小:20px用于正文元素

颜举
2023-03-14
@media screen and (max-device-width: 460px){
    body{
        -webkit-text-size-adjust: none;
    }
}
 类似资料:
  • 我会保持简短直截了当,这样我就明白了: > vw根据视区宽度更改字体大小。 VH根据视区高度更改字体大小。 我的问题是; 有没有一种方法可以根据视区的宽度和高度来缩放我的字体大小?因此,改变浏览器的高度和宽度将适当地缩放我的字体大小。 我这样问是因为我想根据它们所在的容器适当地缩放我的文本大小,我的问题是容器缩放到100%的宽度和100%的高度。因此,根据高度和宽度来缩放文本大小似乎是合乎逻辑的,

  • 我在使用React-Native的文本输入模块时遇到了问题 https://facebook.github.io/react-native/docs/textinput.html 在Android上,这很好也很简单,你创建TextInput,给它一个字体大小,它就相应地设置TextInput控件的高度。 另一方面,对于iOS,除非您在样式中为TextInput提供明确的高度,否则它将是0。 这通常

  • 问题内容: 编写CSS媒体查询时,有什么方法可以使用“或”逻辑指定多个条件? 我正在尝试做这样的事情: 问题答案: 使用逗号指定两个(或多个)不同的规则: 从https://developer.mozilla.org/en/CSS/Media_queries/ …此外,您可以在逗号分隔的列表中组合多个媒体查询;如果列表中的任何媒体查询为true,则将应用关联的样式表。这等效于逻辑“或”运算。

  • 我正在做一个使用camera2 API的项目。当我使用以下命令获取支持的输出预览大小列表时: “输出大小”列表始终返回具有宽度的值 当我使用(或任何类似方法)要检查宽度/高度,它总是返回宽度 根据这个值,我发现在两种情况下,宽度/高度可能会互换它们的值。(w:1920,h:1080预览大小。w:1080,h:1920屏幕大小)。 那么他们之间有什么不同呢?请帮帮我!

  • 因此,我正在努力为我的HTML文档设计一个响应更快的设计,我想要排序的第一件事是根据容器的高度和宽度缩放字体大小。现在我有以下内容: 我研究了一下,在css中找到了“VW”这个单位,它允许字体根据容器进行缩放,但我注意到它只在我调整浏览器宽度时才起作用,这会得到如下结果: 如图所示,如果我调整浏览器的宽度,文本确实会缩放。但是,我意识到当我调整浏览器的高度时,它根本不会缩放。 我如何确保文本是基于

  • 我为我的Java web应用程序分配了一个最大值。由于一些内存泄漏,应用程序已经消耗了将近2 GB的分配内存。此时,我已经使用进行了内存转储。在一个实例中,堆转储大小接近>1.5GB,而在另一个实例中,堆转储大小<100 MB。这背后的原因是什么?