1

IE8 でいくつかのテストを行っていますが、メディア クエリがブラウザーによって取得されていないことがわかりました。以下の例では、.telephoneクラスは最初のクラス宣言ではなく、常に 2 番目のクラス宣言として選択され、margin-bottom が指定されています。

私のサイトの基になっているサイトは IE8 で正しく動作するため、この理由が何であるかわかりません。

ウィンドウは間違いなく 640px よりも大きいことがわかっています。

<link rel="stylesheet" type="text/css" media="all" href="<?php echo 'http://' . $_SERVER['SERVER_NAME']; ?>/inc/css/style.css" />   
<link rel="stylesheet" type="text/css" media="all" href="<?php echo 'http://' . $_SERVER['SERVER_NAME']; ?>/inc/css/index.css" />           

@media only screen and (min-width:640px) {
    .telephone {
        padding-top:.75em;
            margin-bottom:.5em
    }
}

.telephone {
    display:block;
    font-size:1.5em;
    font-weight:normal;
    line-height:1;
    padding-top:.5em
}
4

1 に答える 1

3

画面幅に基づく画面メディア クエリは、IE9 以降でサポートされている CSS3 機能です。IE8 以下ではこの機能をサポートしていないため表示されません。メディア クエリのcaniuseリファレンス。

Respond.js などの JavaScript ポリフィルを使用する必要があります。または、jQuery を使用している場合は、同様に動作する独自の関数を作成できます。jQuery を使用しない場合は、$(window).load() と $(window).resize() の代わりに window.onload と window.onresize を使用する同様の関数を使用して、通常の JavaScript で同じことができると思います。 $(window).width() の代わりに window.innerWidth を使用します。

于 2013-02-03T14:26:13.183 に答える