0

これは私のコードです[非常に単純なコードですが、解読することはできません]。異なるブラウザが占める幅。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flip Transition</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/style1.css">
</head>
<body>
<ul>

    <li>
    <div class="front">1</div>
    <div class="back">
    <img src="../images/100.jpg" alt="Image">
    </div>
    </li>

    <li>
    <div class="front">2</div>
    <div class="back">
    <img src="../images/100.jpg" alt="Image">
    </div>
    </li>

    <li>
    <div class="front">3</div>
    <div class="back">
    <img src="../images/100.jpg" alt="Image">
    </div>
    </li>

    <li>
    <div class="front">4</div>
    <div class="back">
    <img src="../images/100.jpg" alt="Image">
    </div>
    </li>

    <li>
    <div class="front">5</div>
    <div class="back">
    <img src="../images/100.jpg" alt="Image">
    </div>
    </li>

    <li>
    <div class="front">6</div>
    <div class="back">
    <img src="../images/100.jpg" alt="Image">
    </div>
    </li>

    <li>
    <div class="front">7</div>
    <div class="back">
    <img src="../images/100.jpg" alt="Image">
    </div>
    </li>

    <li>
    <div class="front">8</div>
    <div class="back">
    <img src="../images/100.jpg" alt="Image">
    </div>
    </li>

</ul>

</body>
</html>

サファリでは1280 * 0の解像度を使用しますが、クロムでは1163.636 * 0のみを使用します.なぜクロムは全幅を使用していないのですか.また、CSSスタイルシートのリセットを使用しています.しかし、Firefoxには問題はありません.

ここにスタイルシートがあります[何もありません]。

li{
    list-style-type: none;
    float: left;
    width: 200px;
    height: 200px;
    background: red;
}

Chrome ブラウザから

サファリブラウザから

私がコメントアウトして試したCSSスタイルシートのリセットと関係があるのですが、クロムでは1147.642幅と8pxのマージン、サファリでは1264幅と8pxのみを使用しています。

4

1 に答える 1