打开 IE11 开发工具时页面呈现不同答案

【问题标题】：Page renders differently with IE11 Dev tools open打开 IE11 开发工具时页面呈现不同
【发布时间】：2014-08-24 12:46:32
【问题描述】：

我有一个奇怪的问题：我建立的网站使用的是 flexbox 和 LESSHAT。我遇到的奇怪的事情是它没有正确渲染，即 flexbox 的东西似乎被省略了。

但是，如果我按 F12 并重新加载它呈现的页面是应该的。

怎么了？

更新 - 这是代码：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="user-scalable=0, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="c header">
            <div class="box">Title</div>
        </div>
        <div class="box content">
            <div class="cv flex page">
                <div class="cl item">
                    <div class="cvl flex item-title">
                        <div class="cl">Item 1</div>
                        <div class="cl">
                            <div class="c button">1</div>
                            <div class="c button">2</div>
                            <div class="c button">3</div>
                        </div>
                    </div>
                    <div class="cl item-more">
                        >>
                    </div>
                </div>

                <div class="cl item">
                    <div class="cl flex item-title">
                        Item 2
                    </div>
                    <div class="cl item-more">
                        >>
                    </div>
                </div>

                <div class="cl item">
                    <div class="cl flex item-title">
                        Item 3
                    </div>
                    <div class="cl item-more">
                        >>
                    </div>
                </div>
            </div>
        </div>
        <footer>

        </footer>
    </body>
</html>

样式 CSS 是从这个 LESS 文件编译而来的：

@import "lesshat";

* {
    margin: 0;
    padding: 0;
}

.header {
    width:100%;
    height: 48px;

    background: #0000ff;
    color: #fff;
}

.content {
    width:100%;
    background: #00ff00;
}

.page {
    width:100%;
    background: #00ffff;
}

.item {
    background: #ffff00;
    margin: 5px;
}

.button {
    width: 30px;
    border: 1px solid #efefef;
}

.box {
    .display(flex);
}

.c {
    .display(flex);
    .justify-content(center);
    .align-items(center);
}

.cl {
    .display(flex);
    .align-items(center);
}

.cv {
    .display(flex);
    .flex-direction(column);
}

.flex {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

【问题讨论】：

“怎么了？”你没有显示你的代码。我会向甜甜圈打赌，你在错误的地方调用了 flexbox 的东西，当你重新加载时，它会正确加载。但是……我们永远不会知道。
如何插入 HTML 或 CSS 代码？它似乎不起作用。对不起，我是新来的海报。
将代码粘贴到您的问题中，然后再次选择它并使用“代码”标记（双花括号 {} ）将其标识为代码。
非常感谢！现在代码就在那里：

标签： web internet-explorer-11 flexbox lesshat

【解决方案1】：

重新加载和 F12 解决方案似乎表明以下问题之一：

<link> 或 <style> 标签用于 <head> 之外的 CSS
document.write 通过下载的<script>
在相关 JavaScript 代码中请求计算样式，通过：

offsetTop、offsetLeft、offsetWidth、offsetHeight

scrollTop/Left/Width/Height

clientTop/Left/Width/Height

getComputedStyle()

更改相关 JavaScript 代码中的个别样式
在循环中获取和设置样式

参考文献

Rendering: repaint, reflow/relayout, restyle

【讨论】：