IE11 - 忽略所有@media 查询 - Bootstrap

Question

我正在使用引导程序构建一个非常简单的 3 列行。使用 Chrome，一切都按预期显示（连续 3 列）。当我在 IE11 中查看同一页面时，我得到 3 行（它将 3 列堆叠在一起。

<div class="row">
    <!--P3U wekly bar chart-->
    <div class="col-sm-4">                      
        Test1
    </div>

    <div class="col-sm-4">                      
        Test2
    </div>

    <div class="col-sm-4">                      
        Test3
    </div>

</div>

在开发模式下比较两者，我注意到 Chrome 有一些 @media 查询来处理 col-sm-4 类的宽度，例如：

@media (min-width: 768px)
.col-sm-4 {
  width: 33.33333333%;
}
@media (min-width: 768px)
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
  float: left;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

这个 CSS 没有出现在 IE11 中，似乎它忽略了这部分。为了它，我手动将这些 CSS 代码添加到 IE11 中，一切都开始正确到位。现在我假设某些 CSS 代码有一种特殊的方法可以在 IE11 中工作，但是在网上找遍了，找不到明确的答案。

在我的页面中添加了用于 IE8 页面的 Response.js 脚本，看看这是否会有所作为，但没有。

有人知道我在这里缺少什么吗？

Answer 1

我想括号不见了：

@media (min-width: 768px){
  .col-sm-4 {
    width: 33.33333333%;
  }
}
@media (min-width: 768px) {
  .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-   sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
    float: left;
  }
  .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
  }
}

Answer 2

我已将此作为答案，因为它对我有用。 Vincent G 的评论对我来说就像做梦一样。

此答案假设您已经为打印创建了一个单独的页面。

1. 从您的 html 文档中删除所有其他元标记

2. 添加以下元标记（抱歉，这是一张图片，因为代码块不起作用）