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的support section解释了它的局限性，并且不支持它可能的逻辑运算符。

我的问题是：（1）Respond.js是否支持逻辑运算符，包括＆＃34;和＆＃34;？（它似乎不是这样），（2）如果IE8 / Respond.js找到了有效的媒体查询，它是否会覆盖其他所有内容（就像在这里一样）？

Answer 1

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

原始样式表
Respond.js CSS for media =“screen”
Respond.js CSS for media =“all”
Respond.js CSS for media =“print”

看看我最初的样式列表 - 最后一个样式是@media（min-width：480px）....

Respond.js确实尊重所有CSS媒体查询和操作符，但没有它的CSS将覆盖任何带有“screen”的内容。

Answer 2

问题在于仅使用＆＃34;＆＃34;：

关键字“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%;
  }
}

删除单词＆＃39; only＆＃39;应该做的伎俩，但我也建议删除我的例子中的多余查询，以避免混淆。

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

2 个答案: