使布局在 IE8 怪癖模式下工作

【问题标题】：Making layout work in IE8 quirks mode使布局在 IE8 怪癖模式下工作
【发布时间】：2014-08-13 08:05:56
【问题描述】：

第三方产品输出带有 iframe 的网页，我无法完全控制内容。主 iframe 缺少 doctype 声明，这迫使 IE8 进入怪癖模式。

我正在维护一个在屏幕右边缘添加几个按钮的 javascript 应用程序。问题是布局在 IE8 怪癖模式下是关闭的。这些按钮不可见（可能是由于不正确的 IE z-index 行为）并且它们的位置已关闭。

我正在考虑为 IE8 创建一个单独的 CSS。我应该如何调整 quirks 模式的 CSS？

【问题讨论】：

使用conditional comments。
@robertc - 如果他能够设置条件 cmets，他是否也能够设置 doctype？
@FrankConijn 我的理解是：他用按钮控制页面而不是iframe中加载的页面。
@robertc - 好的，但他不必在加载到 iframe 的页面上设置条件 cmets 吗？
@FrankConijn 他想在 IE 中的按钮上应用一个额外的 CSS 文件，所以他需要添加条件 cmets。

标签： css internet-explorer-8 quirks-mode

【解决方案1】：

如果您确实可以控制（单独的）Javascript 文件，并且假设已经在头部调用了一个 JS 文件，您可以在 html 元素上设置一个条件类，如下所示：

<html>
<head>
    <title>Demo Conditional Class Quirks Mode</title>
    <script type="text/javascript" src="folder/js_file.js"></script>
    <style type="text/css">
    div {
        width: 100px;
        height: 100px;
        background: red;
        position: relative;
        left: 100px;
        }
    .ieQM div {
        left: 200px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

将其添加到 js_file.js 时：

if (document.documentMode == 5)
    document.documentElement.className += ' ieQM'; // IE in Quirks Mode

.
顺便问一下，我想知道这是否只是IE8中的一个问题，文档没有doctype？没有它，不是所有的 IE 都会恢复到怪癖模式吗？

【讨论】：