CSS 样式在 iframe 内外表现不同

CSS styles behave differently inside & outside iframe

嵌套列表在普通 html 和 iframe 中看起来不同。首先看一下 li:如果 li 没有文本,iframe 中的 ol 元素不会换行到下一行。

这是 fiddle:

`https://jsfiddle.net/Lwj9jjj1/1/`

我认为它必须与 html5 相关。 iframe 可能不符合 html 标准行为。

我对图像有同样的问题 - 在 iframe 中它们没有垂直 space 在它们之后,而在 iframe 中没有 - 它们有。我通过向图像添加 vertical-align 属性 来解决这个问题。 fiddle:

`https://jsfiddle.net/Lwj9jjj1` 

您在 iframe 中使用了 quirks 模式,所以是的,您的 iframe 的行为与使用标准模式的主要 fiddle 不同。

解决方案:在 iframe 中也使用标准模式。

var content = '<!DOCTYPE html><title></title> <ol> <li> <ol> <li>a</li><li> <ol> <li>b</li></ol> </li></ol> </li></ol>';

https://jsfiddle.net/Lwj9jjj1/3/