文章/答案/技术大牛

发布

社区首页 >问答首页 >打开IE11开发工具后以不同方式呈现页面

问打开IE11开发工具后以不同方式呈现页面
EN

Stack Overflow用户

提问于 2014-07-03 11:49:54

回答 1查看 397关注 0票数 0

我有一个奇怪的问题:我构建的站点是使用flexbox和LESSHAT。奇怪的是，我遇到的是，它没有正确地呈现，即柔印盒的东西似乎被忽略了。

但是，如果我点击F12并重新加载页面，那么它是否应该呈现。

怎么啦？

UPDATE -这是代码：

<!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是从这个较少的文件编译的：

@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

lesshat

web

internet-explorer-11

回答 1

Stack Overflow用户

发布于 2016-08-14 17:00:12

reload和F12解决方案似乎表明了以下问题之一：

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

offsetTop，offsetLeft，offsetWidth，offsetHeight 滚动顶部/左边/宽度/高度客户顶/左/宽/高 getComputedStyle()

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

参考资料

渲染:重绘、重流/重放、重样式

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24552938

复制

相似问题

问打开IE11开发工具后以不同方式呈现页面
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问打开IE11开发工具后以不同方式呈现页面EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问打开IE11开发工具后以不同方式呈现页面
EN