Question

我们仍然从ie8获得了大量的流量，但我们决心采用响应式路线。我们过去曾在ie8中使用媒体查询，但使用我们最新的模板却没有成功。

我们在html head标签中的CSS /视口设置：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" media="screen" href="/request/css/bootstrap.css">
<link rel="stylesheet" media="screen" href="/request/css/bootstrap-responsive.css">
<link rel="stylesheet" media="screen" href="/request/css/styles.css">

<script src="http://www.oursite.com/js/modernizr.custom.2.6.2.js"></script>
<!--[if (lt IE 9) & (!IEMobile)]>
      <script src="http://www.oursite.com/js/respond.min.js"></script>
<![endif]-->

我们的媒体查询语法（使用bootstrap）：

@media (max-width: 767px) { }

我发誓这在过去有效，但现在没有。我们尝试了各种其他polyfill与modernizr自定义，尝试html5 shiv代替modernizr，尝试调整元视口设置，并尝试不同的媒体查询语法（@media屏幕...）。我已经三次检查了HTML并验证了它。我们正在使用自举的排液 - 但应该正确设置。我的想法已经不多了。救命？

Answer 1

我在新闻网站上使用了bootstrap，但它在IE8上不起作用，我使用了css3-mediaqueries.js javascript但仍然无效。如果您希望媒体查询使用此javascript文件添加屏幕到css

中的媒体查询行

这是一个例子：

<script type="text/javascript" src="css3-mediaqueries.js"></script>

<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

媒体查询在ie8中停止工作

1 个答案: