为什么默认情况下 iframe 是内联元素？答案

【问题标题】：Why are iframes inline-elements by default?为什么默认情况下 iframe 是内联元素？
【发布时间】：2015-05-11 06:51:55
【问题描述】：

iframe = 内联？

今天在调试一些布局问题时，我惊讶地发现<iframe> 元素的默认显示属性为inline。

对我来说，这似乎很奇怪，尤其是考虑到您可以将 height 和 width 应用于浏览器所尊重的 <iframe>，而对于简单的内联元素而言，情况不应该如此。

那么谁能解释一下这背后的原因？

HTML

<iframe id="test"></iframe>

CSS

alert($('#test').css('display'))

谢谢！

【问题讨论】：

【解决方案1】：

因为 HTML4 规范是这么说的：

IFRAME 元素允许作者在文本块。在一段文本中插入内联框架是很像通过OBJECT 元素插入一个对象：它们都是允许您在另一个中间插入一个 HTML 文档，它们都可以与周围的文本等对齐。

“与周围的文本对齐”部分表示默认情况下它们不应该是块级的。

确实，通常，内联元素会忽略 height 和 width 属性：

10.3.1 Inline, non-replaced elements

width 属性不适用。

10.6.1 Inline, non-replaced elements

height 属性不适用。

但这不适用于替换元素，例如iframe。这在10.3.2 和10.6.2 部分进行了解释。

【讨论】：

这与像“img”这样的内联块元素有什么不同？
@aKzenT 是一样的。默认情况下，图像也是内联的，而不是内联块。
但这不是很奇怪吗？看起来 inline-block 将是合乎逻辑的选择，因为它的行为似乎与内联替换元素相同。在“inline-block”之前是否存在诸如替换元素之类的历史组件？
@aKzenT 可能是因为inline-block 是由 CSS 2.1 (2011) 引入的，但 CSS 2 (1998) 没有它。因此，HTML 4.01 (1999) 不能推荐 inline-block 作为替换元素的默认样式。

【解决方案2】：

【讨论】：

这不是解释。它称为“内联框架”以将其与 HTML4 框架集中的普通框架区分开来。事实上，在 HTML5 规范中它不再说“内联框架”。 w3.org/TR/html5/embedded-content-0.html#the-iframe-element
@aKzenT ：对不起，我的知识有限，请随时编辑我的答案或创建自己的答案。