Question

由于IE＆lt; 8和其他一些小浏览器不支持@media查询，我想通过模拟特定宽度（如1200px）为不支持的浏览器创建一个CSS，并将其导出为一个非响应的CSS文件来使用使用这些浏览器。是否有任何工具或其他简单的方法来实现这一目标？

编辑：我正在使用Twitter Bootstrap 3

Answer 1

Bootstrap 3和媒体查询不支持 - ie7。即使你使用像Respond.js这样的任何polyfill，你也可以让IE6-8响应媒体查询。但bootstrap-3.0适用于移动优先设计方法，它不支持ie7。但如果您在媒体查询之外定义所有实际设计，一切都应该没问题。它将在所有浏览器上运行。如果你真的想支持ie7，那么使用bootstrap 2。*

在你的html中使用条件语句，如下所示：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">

然后按照以下目标定位您的浏览器：

.lt-ie9  .btn-nav
                {
                //for ie 8 only, change following.
                    margin: 0;
                    display: inline-block;
                }
.lt-ie8 .btn-nav{
// for ie 7
background: white;
}

或者只是简单地定义标准css，它应该适用于文件顶部的所有浏览器，而不需要媒体查询。这应该是编写CSS的首选方式，并结合上述良好实践。

或use a polyfill like Respond.js使媒体查询适用于ie6-8

从bootstrap.css创建无响应的CSS

1 个答案: