IE8忽略带有response.js的媒体查询

Question

尽管有Respond.js支持，IE8似乎还是忽略了一些CSS媒体查询。 我想知道这是否是由于某些操作员不受Respond.js支持

对于特定元素的宽度，以下是按顺序应用于该元素的样式的列表：

.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}
@media (min-width: 480px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
}
.modal-dialog {
  width: 100%;
  margin: 0 auto;
}
@media only screen and (min-width: 480px) {
  .modal-dialog {
    width: 90%;
    margin: 30px auto;
  }
}
@media only screen and (min-width: 768px) {
  .modal-dialog {
    width: 75%;
  }
}

在台式机屏幕上，我希望宽度最终可以达到75％，并且在所有浏览器中都可以，但是IE8使用600px。 IE8开发人员工具确实显示所有规则均已读取，但这些规则已被覆盖。 Respond.js的支持部分说明了其局限性，并且可能不支持逻辑运算符。

我的问题是：（1）Respond.js是否支持逻辑运算符，包括“和”？ （似乎不是这样），以及（2）如果IE8 / Respond.js找到了有效的媒体查询，它是否会覆盖其他所有内容（如此处所做的那样）？

Answer 1

好的，我发现了问题，这实际上是Respond.js如何将CSS添加到head元素的问题。 我以为样式表中CSS的顺序将保持不变，但是Respond.js会四处移动。 头中CSS的顺序：

• 原始样式表
• 用于媒体=“屏幕”的Respond.js CSS
• 用于media =“ all”的Respond.js CSS
• 用于media =“ print”的Respond.js CSS

看一下我的原始样式列表-最后一个样式列表是@media（最小宽度：480px）。

Respond.js确实支持所有CSS媒体查询和运算符，但是没有“ screen”的任何内容都将被CSS覆盖。

Answer 2

问题在于使用“ only”：

关键字“仅”还可以用于向较旧的用户代理隐藏样式表。 用户代理必须处理以'only'开头的媒体查询，就像没有'only'关键字一样。

资料来源： https : //stackoverflow.com/a/8595600/1556245

另外，您的级联看上去很奇怪，并且您的许多查询都被覆盖。 这是您的样式应具有的风格：

.modal-dialog {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
/*
  If this next media query is for print, specify that using the "print" media type.
  If it's for screens, delete it - it's being overriden by the next query.
*/
@media (min-width: 480px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
}
@media screen and (min-width: 480px) {
  .modal-dialog {
    width: 90%;
    margin: 30px auto;
  }
}
@media screen and (min-width: 768px) {
  .modal-dialog {
    width: 75%;
  }
}

删除“仅”一词应该可以解决问题，但是我还建议根据我的示例删除多余的查询，以避免混淆。