IE中的css calc函数错误

Question

IE中的css calc函数错误

Dan*_*eld 5 css internet-explorer rounding css3

编辑

正如@Joe在他的回答中所指出的,IE中的问题与媒体查询无关.

因此,我更新了旧标题:("IE中的媒体查询GLITCH")与当前标题.(还要感谢一些meta建议)

可以肯定的是,我创建了一个只包含calc函数的新FIDDLE,并且看得很低 - 我在IE中看到了与我在原始媒体查询中所做的相同(不良)行为.

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

我media queries用来证明一个盒子的清单.

基本上,我为每个#columns状态设置了一个媒体查询,然后我用它calc()来计算每个元素的margin-right(除了最后一列中的那些元素).

这是小提琴

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

我看到媒体查询状态之间的故障(包括闪烁和不遵守媒体查询).

这是我正在谈论的截图

[在浏览器窗口宽度为710px时截图]:

在此输入图像描述

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

Answer 1

Joe*_*Joe 9

固定:

这是我的解决方案顺利运作的方法

进一步调查数学我有一个预感互联网资源管理器有困难尝试做一些愚蠢的事情(还有什么是新的),这是允许十进制值,即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;
  }
}

Run Code Online (Sandbox Code Playgroud)

编辑:

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

看看更新的小提琴

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

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

兼容模式 - 确保关闭此功能可能会导致意外行为或仅将介质查询中断

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