2

我有一个运行 Sharepoint 2007 的站点。SP 2007 的母版页没有 DOCTYPE，因此以 quirks 模式呈现。我在 Sharepoint 内的 iframe 中嵌入了另一个站点。该站点更现代——HTML5 DOCTYPE 和 IE=Edge 的 X-UA 兼容元。

因此，我试图了解 iframe 内容在各种 IE 浏览器中呈现的模式。

据我所知，在 <= IE8 中，父级（Sharepoint）将以怪异模式呈现，而框架将以标准模式呈现。这就是我想要的。

但是，在 IE9+ 中，会发生什么？下面的参考资料似乎认为我的框架将在 Quirks 模式下开始渲染，这会很糟糕。如果我将 IE8 的 X-UA 兼容元数据放在 Sharepoint 的主文件中，那会在我的 iframe 中返回标准模式吗？

编辑：在 IE10 中，我测试了父级的各种配置（有 doctype 和没有，以及各种元数据），并得到了这些结果：

  • IE10/doctype/no meta：10个标准/10个标准
  • IE10/无文档类型/元边缘：10 个标准/10 个标准
  • IE10/no doctype/meta 9: 9 个标准/9 个标准
  • IE10/no doctype/meta 8: 8 个标准/8 个标准
  • IE10/no doctype/meta 5: 5 Quirks/8 Standards
  • IE10/无文档类型/无元：10 个怪癖/10 个标准

一些有用的链接：

IE有时让我想跳桥。

4

1 回答 1

2

无论任何元标记或文档类型设置如何，iframe 都将以与包含页面相同的模式呈现。当使用开发工具手动更改文档或浏览器模式时，我还注意到混合结果，所以不要依赖它。如果您想超级安全，请在更改文档模式时加载新的浏览器选项卡 - 我不相信它！

我做的这个快速页面将为您提供您所追求的兼容性信息：http: //stevesspace.com/test/quirks/modern.html

<!doctype html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <title>Inner page</title>
    <style>
        .pass 
        {
            color: green;
        }
        .fail
        {
            color: red;
            font-weight: bold;
        }
        #quirks-mode
        {
            color: #fff;
            color: f00;
        }
        #not-quirks-mode
        {
            color: green;
            color: fff;
        }
    </style>
</head>
<body>
    <div>Quirks Mode: <span id="quirks-mode">true</span><span id="not-quirks-mode">false</span></div>
    <div>Javascript: <span id="scripts-enabled" class="fail">false</span></div>
    <div>Array map support: <span id="array-map" class="fail">false</span></div>
    <hr />
    <div>Doc Mode: <span id="doc-mode"></span></div>
    <div>Compat Mode: <span id="compat-mode"></span></div>
    <hr />
    <div>SVG Circle should render below</div>
    <svg>
        <circle cx="50" cy="50" r="50" style="fill: green;"/>
    </svg>
</body>
<script type="text/javascript">
    document.getElementById('doc-mode').innerHTML += document.documentMode;
    document.getElementById('compat-mode').innerHTML += document.compatMode;

    document.getElementById('scripts-enabled').innerHTML = 'true';
    document.getElementById('scripts-enabled').className = 'pass';

    if (Array.prototype.map) {
        document.getElementById('array-map').innerHTML = 'true';
        document.getElementById('array-map').className = 'pass';
    }
    </script>
</html>
于 2013-05-27T01:51:27.573 回答