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

Question

我正在使用bootstrap来构建一个非常简单的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

我已经回答了这个问题，因为它对我有用。文森特·G（Vincent G）的评论对我来说就像一个梦。

此答案假定您已为打印创建了单独的页面。

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

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