1

マイページのスタートは以下の通り

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Database Reports</title>
    <link href='http://fonts.googleapis.com/css?family=Oxygen:400,300' rel='stylesheet' type='text/css'>
    <link href='css/style.css' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--[if (gte IE 6)&(lte IE 8)]>
        <script src="js/selectivizr-min.js"></script>
    <![endif]-->
</head>

次に、ボディ内にいくつかのDIVがあります

<div class="left"></div>
...
<div class="left"></div>

私のCSSは次のとおりです

.left {
    width: 30%;
    float: left;
    margin: 5px;
}

.left:nth-child(4) {
        clear: both;
}

@media screen and (max-width: 1024px) {
    .left {
        width: 40%;
    }

    .left:nth-child(4) {
        clear: none;
    }

    .left:nth-child(3) {
        clear: both;
    }
}

@media screen and (max-width: 800px) {
    .left {
        width: 80%;
    }

    .left:nth-child(4), .left:nth-child(3) {
        clear: none;
    }

    .left:nth-child(2) {
        clear: both;
    }
}

Firefox と Chrome では、すべて問題なく動作します。完全な解像度では、3 つの列の後に改行、3 つの列の後に改行などがあります。

ブラウザのサイズが変更された（小さい）場合、2 列、2 列のブレーク、ブレークなどがあります。

私は IE8 を使用しており、互換性モードをオフにすると、3 つの列が表示されてから (上記のように) 中断されますが、ブラウザーのサイズを変更しても何も起こりません。常に 3 列のままです。

互換性モードをオンに戻すか (会社のほとんどのユーザーがこれを使用します)、または IE7 を使用すると、問題が発生したり応答性が低下したりしません。

アドバイス/ヘルプをいただければ幸いです

4

1 に答える 1