iframe与普通网页呈现神秘不同？

我遇到iframe与iframe之外的页面呈现不同的问题。这发生在Chrome和Firefox中。我真正需要做的是强制iframe以与常规主页相同的方式呈现。我处于无法更改iframe内容的情况。iframe与普通网页呈现神秘不同？

两个例子：

实施例1：上述的H1边距

代码（这是整个HTML文件）：

<h1>hello</h1> 

<br><br> 

<iframe srcdoc="<h1>hello</h1>"></iframe>

截图：

Screenshot 1

问题：

iframe中H1的边缘太多。我需要让他们匹配。具体来说，我需要iframe中的h1匹配。而且，对于这种特定的情况，这不能成为特定的CSS破解。我知道在这里我可以修改iframe代码来用CSS来破解它。但为什么它呈现不同？

实施例2：缺少 '像素' 的说明书中的CSS

代码（这是整个HTML文件）：

<div style='border:1px solid black;width:30px;height:30px;border-radius:30'></div> 

<br><br> 

<iframe srcdoc="<div style='border:1px solid black;width:30px;height:30px;border-radius:30'></div>"></iframe>

截图：

Screenshot 2

问题：

在iframe中，border-radius参数被忽略，因为缺少'px'。在iframe之外，这很好。同样，显然我可以在iframe中添加'px'，但不幸的是，这不是一个选项。我如何使iframe呈现与主页面相同的方式？

来源

2014-11-01 MikeC8

父文档使用不同的解析器（我猜怪癖模式）从iframe中呈现。由于srcdoc属性是html5唯一属性，所以iframe使用html5解析器呈现。

如果您通过添加<!DOCTYPE html>将父文档定义为html5，您会注意到父文档也会有额外的边距和平方。

也许您可以尝试在srcdoc字符串中添加另一个doctype以强制浏览器以其他模式呈现它。我无法得到这个工作，我想它不被支持。

来源

2014-11-01 09:04:22 ckuijjer

这确实是一个怪癖模式问题，但它不是一个解析器问题，它不依赖'srcdoc'属性。 *符合已发布的HTML规范的任何* doctype都将触发“标准模式”; '<！DOCTYPE html>'是实现这一点最简单的方法。所以这不是一个HTML5问题;怪癖模式和“标准模式”之间的区别早于HTML5多年。 – 2014-11-01 13:13:37

根据HTML5建议书，使用'srcdoc'属性创建的任何文档都以“no-quirks模式”（它们的“标准模式”的单词）呈现。这里有点隐藏，但在http://www.w3.org/TR/html5/syntax.html#the-initial-insertion-mode – 2014-11-01 13:24:43

中有说过，太好了，是的，就是这样。特别感谢Jukka - 你在文档中找到了。真棒。 – MikeC8 2014-11-01 22:54:00

iframe与普通网页呈现神秘不同？

回答

相关问题