Question

修改

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

因此我更新了旧标题:(“IE中的媒体查询GLITCH”）与当前标题。（还要感谢一些meta advice）

为了确定，我创建了一个仅包含calc函数的新FIDDLE，并且看得很低 - 我在IE中看到的行为与我在媒体查询的原始小提琴中所做的相同（不良）行为。

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

我正在使用media queries来证明一个方框列表。

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

这是 fiddle

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

中运行时

我发现媒体查询状态之间存在故障（包括闪烁和不遵守媒体查询）。

以下是我正在谈论的内容的截图

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

enter image description here

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

Answer 1

FIX：

here is a smoothly working jsfiddle of my solution

进一步调查数学我有一个预感互联网资源管理器在尝试做一些愚蠢的（还有什么是新的）时遇到了麻烦，那就是允许小数值，即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;
  }
}

编辑：

我已经为媒体查询添加了颜色，以帮助解决问题的根源并将其排除在外。我也排除了兼容模式作为这个问题的原因，你的计算格式看起来很好。

take a look at the updated fiddle

是媒体查询打破了我们会看到颜色闪烁的不一致......这让我相信这是一个特定于我们的边距/间距定义的数学计算误差......进一步调查即将推出

我在媒体查询中遇到了一些问题，即......一些值得一提的错误

兼容模式 - 确保关闭此功能可能会导致意外行为或只是打破媒体查询

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

<!DOCTYPE html>

我注意到你正在使用calc（）我的第一反应是确保所有数学运算符都被白色空间包围......这是我遇到的另一个问题，其中

calc(2px+5px)

如果正确的语法应该

，

有失败的倾向

calc(2px + 5px)

IE中的css calc函数错误

1 个答案: