1

我正在对 IE8 进行一些测试，但我发现浏览器没有接收到我的媒体查询。在下面的示例中，.telephone该类始终被作为第二个类声明而不是第一个类声明，并带有边距底部。

我看不出这是什么原因，因为我的网站所基于的网站可以在 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参考。

您将需要使用 JavaScript polyfill，例如Respond.js，或者如果您使用的是 jQuery，您可以编写自己的函数来执行类似的操作。如果不使用 jQuery，我相信您可以使用类似的函数对普通 JavaScript 执行相同操作，其中将使用 window.onload 和 window.onresize 代替 $(window).load() 和 $(window).resize()，并使用 window.innerWidth 而不是 $(window).width()。

于 2013-02-03T14:26:13.183 回答