5

编辑

正如@Joe 在他的回答中指出的那样，IE 的问题与媒体查询无关。

因此，我用当前的标题更新了旧标题：（“IE 中的媒体查询 GLITCH”）。（还要感谢一些元建议）

可以肯定的是，我创建了一个新的FIDDLE，其中只包含 calc 函数，并且看不到 - 我在 IE 中看到了与我最初处理媒体查询时相同的（坏）行为。

另外，我注意到的一个有趣的观察是，这只发生在我在 calc 操作中使用除法时，但如果我使用更简单的东西，比如calc(100% - x px)- IE 处理它就可以了。

我media queries用来证明一个盒子列表的合理性。

基本上，我为每个#columns 状态设置了一个媒体查询，然后我用calc()它来计算每个元素（最后一列中的元素除外）的边距。

这是小提琴

现在这在 chrome 和 firefox 中运行良好 - 但是当我在 IE9+ 中运行它时

我看到媒体查询状态之间出现故障（包括闪烁和不服从媒体查询）。

这是我正在谈论的屏幕截图

[在浏览器窗口宽度为 710px 时截取的屏幕截图]：

在此处输入图像描述

这是一个 IE 错误还是我做错了什么？

4

1 回答 1

9

使固定：

这是我的解决方案的一个顺利工作的jsfiddle

进一步调查数学我有一个预感 Internet Explorer 在尝试做一些愚蠢的事情时遇到了麻烦（还有什么是新的），那就是允许十进制值，即 margin-left:250.123px; 从而导致非常微小的不一致并破坏您的布局。

为了纠正这个问题，我暂时从你的所有计算中减去了 1px，一切看起来都很顺利

@media (max-width: 350px) {
  .container > div {
    margin-left: calc(((100% - 150px)/2) - 1px);
    margin-right: calc(((100% - 150px)/2) - 1px);
    background:black;
  }
}

@media (min-width: 350px) and (max-width: 550px) {
  .container > div {
    margin-right: calc((100% - 300px) - 1px);
    background:red;
  }
  .container > div:nth-child(2n) {
    margin-right: 0;
  }
}
@media (min-width: 550px) and (max-width: 750px)  {
  .container > div {
     margin-right: calc(((100% - 450px) / 2) - 1px);
    background:purple;
  }
  .container > div:nth-child(3n) {
    margin-right: 0;
  }
}

@media (min-width: 750px){
  .container > div {
    margin-right: calc(((100% - 600px) / 3) - 1px);
  }
  .container > div:nth-child(4n) {
    margin-right: 0;
  }
}

编辑：

我为媒体查询添加了颜色，以帮助解决问题的根源，并将它们排除在问题之外。我还排除了兼容性模式是导致此问题的原因，并且您的 calc 格式看起来很好。

看看更新的小提琴

如果媒体查询中断，我们也会看到颜色闪烁的不一致......这让我相信这是一个特定于我们的边距/间距定义的数学计算错误......即将进行进一步调查

我在 ie 中遇到了一些有关媒体查询的问题......值得一提的一些错误是

兼容模式 - 确保将其关闭可能会导致意外行为或只是一起中断媒体查询

doctype - 不声明或没有 html5 doctype 可能是导致更多媒体查询不一致的原因

<!DOCTYPE html>

我注意到您正在使用 calc() 我的第一反应是确保所有数学运算符都被空格包围......这是我遇到的另一个问题，其中

calc(2px+5px)

有失败的倾向，正确的语法应该是

calc(2px + 5px)
于 2013-05-23T14:42:06.070 回答