IE中的css calc函数错误答案

【问题标题】：css calc function bug in IEIE中的css calc函数错误
【发布时间】：2013-05-15 12:57:46
【问题描述】：

编辑

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

因此，我将旧标题：（“IE 中的媒体查询故障”）更新为当前标题。（也感谢一些meta advice）

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

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

我正在使用media queries 来证明一个框列表的合理性。

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

这是fiddle

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

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

这是我正在谈论的截图

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

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

【问题讨论】：

标签： css internet-explorer rounding

【解决方案1】：

修复：

here is a smoothly working jsfiddle of my solution

进一步调查数学我有一个预感 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 格式看起来很好。

take a look at the updated fiddle

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

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

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

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

<!DOCTYPE html>

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

calc(2px+5px)

在正确的语法应该出现的地方有失败的倾向

calc(2px + 5px)

【讨论】：

我一直在寻找一种更清洁的解决方案 - 这对我来说完全有效，但我更喜欢某种截断或向下舍入的方法。
+1 谢谢。所以看起来这个问题与媒体查询无关，而是与 IE 如何呈现子像素有关——就像 here... 解释的那样，对吧？
是的，这正是我的想法——顺便说一句，好文章
谢谢，您减去 1px 的解决方案对我有用。我根据您的发现编辑了原始问题，以表明问题出在 calc 函数中 - 特别是除法运算。我有点惊讶我找不到任何关于这个 IE 错误的文档。
两年后还是有这个经历。 1px 解决方案对我有用。谢谢。