css - 为什么 iframe 默认是内联元素？

Question

iframe = 内联？

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

对我来说这似乎很奇怪，尤其是考虑到您可以申请 height和 width到<iframe>浏览器尊重这一点，简单的内联元素不应如此。

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

演示

HTML

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

CSS

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

https://jsfiddle.net/0tdLr9pq/

谢谢!

Answer 1

因为 HTML4 规范是这样说的:

The IFRAME element allows authors to insert a frame within a block of text. Inserting an inline frame within a section of text is much like inserting an object via the OBJECT element: they both allow you to insert an HTML document in the middle of another, they may both be aligned with surrounding text, etc.

“与周围文本对齐”部分意味着默认情况下它们不应该是 block 级的。

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

10.3.1 Inline, non-replaced elements

The width property does not apply.

10.6.1 Inline, non-replaced elements

The height property does not apply.

但是对于被替换的元素，如 iframe，情况并非如此。这在 10.3.2 中有解释。和 10.6.2部分。