51

在阅读CSS2 规范的height属性时遇到以下情况：

适用于：所有元素，但未替换的内联元素、表格列和列组

我了解替换元素（<img>）或内联元素（<button>，<a>）是什么，但无法找到非替换内联元素的示例。

4

3 回答 3

54

对于大多数实际目的，最好将“替换”理解为“嵌入”。所以“不可替换元素”只是一个这样渲染的元素，而不是导致一些外部内容出现在它的位置。

“不可替换的内联元素”这一表述没有它自己的定义：它只是指任何既是非替换元素又是内联元素的元素。比如<a>。HTML 中的大多数元素都是不可替换的。非替换元素只是一个不是替换元素的元素。

然而，在 CSS 规范中，只有“替换元素”这个概念的一般描述，没有任何此类元素的明确列表。这是可以理解的，因为 HTML 的发展相当独立于 CSS。

随着时间的推移，这个概念发生了一些变化。CSS 1 规范说： “在 HTML 中，IMG、INPUT、TEXTAREA、SELECT 和 OBJECT 元素可以是替换元素的示例。” 在较新的规范中，不再包含表单字段。这反映在 HTML5 草案中，其中渲染部分明确列出了不可替换元素下的表单控件。据它说，唯一被替换的元素是那些将外部内容（例如图像、视频、小程序或 HTML5 画布）嵌入到 HTML 文档中的menu元素——除了也提到了修改后的元素（预计将在与浏览器控件相呼应的方式，因此它也嵌入了外部内容）。

这种变化反映了浏览器的发展。早期的浏览器使用系统例程以一种不受 CSS 任何东西影响的方式实现表单字段，并且这种方法仍然存在，但现在表单字段大多可以用 CSS 格式化，因此它们已经有效地从替换变为非替换的元素。

于 2012-09-18T06:33:07.707 回答
26

David Baron在他的网站上讨论了这个问题。

内联元素有两种类型：替换内联元素和非替换内联元素。一般来说，非替换元素是那些内容包含在文档中的元素，而替换元素是那些内容在文档之外的元素。例如，在代码中：

访问<a href="http://www.w3.org/">World Wide Web Consortium</a> 以了解...a元素的内容是“万维网联盟”。被替换的元素是那些内容来自一些外部来源的元素，例如，一个object或img元素。

inline-table然而，就内联框模型而言，除了具有显示类型的元素和inline-block（后者是 CSS3 提议的用于容纳表单元素的类型）的元素被视为替换元素外，定义与上述相同 。

非替换内联元素的好例子是span, strong, i, b,em等。

于 2012-09-17T23:02:33.313 回答
16

您可以在索引中找到替换元素的定义：

其内容超出 CSS 格式化模型范围的元素，例如图像、嵌入文档或小程序。例如，HTML IMG 元素的内容经常被其“src”属性指定的图像所替代。被替换的元素通常具有固有尺寸：固有宽度、固有高度和固有比率。例如，位图图像具有以绝对单位指定的固有宽度和固有高度（显然可以从中确定固有比率）。另一方面，其他文档可能没有任何固有尺寸（例如，空白 HTML 文档）。

如果认为被替换元素可能会将敏感信息泄露给第三方，则用户代理可能会认为被替换的元素没有任何内在维度。例如，如果 HTML 文档根据用户的银行余额改变了内在大小，那么 UA 可能想要表现得好像该资源没有内在尺寸一样。

CSS 渲染模型中不考虑替换元素的内容。

不可替换的内联元素是内联且不符合上述规定的内容。粗略地说，它是一个包含（或可以包含）可以正常设置样式的文本的元素。( a, b, cite, def, em, 等)

于 2012-09-17T23:49:36.617 回答