0

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

编辑：我正在使用 Twitter Bootstrap 3

4

1 回答 1

2

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 的首选方式，并结合了上述良好实践。

或者使用像 Respond.js 这样的 polyfill使媒体查询适用于 ie6-8

于 2013-09-19T16:11:20.313 回答