Question

我正在IE8上进行一些测试，我发现我的媒体查询没有被浏览器接收。在下面的示例中，.telephone类始终被选为第二个类声明，而不是第一个类，具有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
}

Answer 1

基于屏幕宽度的屏幕媒体查询是从IE9开始支持的CSS3功能。 IE8及以下版本不会看到它们，因为它们不支持该功能。媒体查询的caniuse参考。

您需要使用JavaScript填充，例如Respond.js，或者如果您使用的是jQuery，则write your own function可以采用类似的行为。如果不使用jQuery，我相信你可以使用类似的函数对普通的JavaScript做同样的事情，其中window.onload和window.onresize将被用来代替$（window）.load（）和$（window）.resize（），并使用window.innerWidth而不是$（window）.width（）。

仅在屏幕上IE8中没有选择媒体查询

1 个答案: