0

奇妙な問題があります: 私が構築したサイトは、flexbox と LESSHAT を使用しています。私が遭遇する奇妙なことは、正しくレンダリングされないことです。つまり、フレックスボックスが省略されているようです。

ただし、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;
}
4

1 に答える 1

0

リロードおよび F12 ソリューションは、次の問題のいずれかを示しているようです。

  • <link>または<style>外側の CSS のタグ<head>
  • document.writeダウンロードしたものを介して<script>
  • 以下を介して、関連する JavaScript コードで計算されたスタイルを要求します。

offsetTop、offsetLeft、offsetWidth、offsetHeight

scrollTop/Left/Width/Height

clientTop/Left/Width/Height

getComputedStyle()

  • 関連する JavaScript コードの個々のスタイルを変更する
  • ループでのスタイルの取得と設定

参考文献

于 2016-08-14T17:00:12.073 に答える