当前位置: 首页 > 面试题库 >

CSS-忽略行高的内联元素

莫欣悦
2023-03-14
问题内容

我无法弄清楚为什么内联元素line-height在某些浏览器中会忽略(Chrome和Firefox会忽略它,但IE9不会)。

这是一个例子:

<small style="line-height: 1; font-size: 26px;">Hello, World</small>

预期结果是元素高度为26px,但是将其设置为31px。如果我将元素的显示设置为“阻止”,则高度正确设置为26px。

我读的所有内容都应该设置为行高,因此我无法弄清楚。这是我在W3C上阅读的内容:

计算行框中每个行内框的高度。对于替换的元素,内联块元素和内联表元素,这是它们的边距框的高度。 对于嵌入式盒,这是它们的’line-height’


问题答案:

Webkit检查器显示的内容(以及您在PhotoShop中测量的 内容 )是 内容区域 的尺寸。

[内联元素]的内容区域的高度应基于字体,但是此规范未指定如何。UA可以例如使用em-box或字体的最大升序和降序…

在这里,不同的浏览器只是使用不同的方法。有关说明,。注意webkit如何呈现更高的内容区域,但是line-height仍然是正确的

如果“ line-height”指定的高度小于所包含框的内容高度,则填充的背景和颜色以及边框的颜色可能会“渗入”相邻的线框。



 类似资料:
  • 问题内容: 我感到困惑的元素。 但是我不确定我是否理解。我知道如果将display:inline-block转换为block,我可以使高度正确。但是我试图理解的是行高内联元素是如何工作的。这里是问题: 我有一段文字,但是如果看到浏览器的开发人员工具,它将显示。为什么?该只是aproximate?还是不能衡量起伏? 为什么背景色元素不具有相同的比?的在元件测量线箱的空间,即空间的上方和下方的线,而不

  • 问题内容: 我正在某个网站上插入一些标题中的换行符。假设我无法编辑源HTML,是否有CSS可以忽略这些中断的方法? 我正在移动网站的优化,所以我真的不想使用JavaScript。 问题答案: 使用css,您可以“隐藏” br标签,它们不会起作用: 如果只想在特定的标题类型中隐藏某些内容,只需使CSS更具体即可。

  • 现在,如果我使用以下代码进行比较,我将在XMLUnit的帮助下相互比较两个xml文件 现在它给出了:预期的属性值'02',但是'01',但我不希望有差异,我希望表id是唯一的,如果在另一个文件中看到相同的表id,则只检查本例中的Main-Element:table->包含什么。

  • 问题内容: 我想在单词中镜像字母,所以我使用了CSS变换属性,但是如果我将文本包裹在一个范围内则无法使用,但是如果我选择了ass或 那么转换不适用于内联元素吗? 示例1(转换失败) 示例2(Works,如果使用OR) 问题答案: 在官方W3规范中,在可转换元素下回答: 一个元素,其布局由CSS框模型控制,该CSS框模型可以是 块级 或 原子内联级元素 ,或者其“ display”属性可以计算为“

  • 考虑到此XML: 我只想验证“祖父”及其属性,而忽略XML的其余部分。为此,我在模式中添加了这一行:type=“xs:anyType” 正在使用的XSD如下所示: 我怎能无视“父亲”下面的一切?

  • 是否可以在CSS中使用内联SVG定义? 我的意思是: