编辑
正如@Joe 在他的回答中指出的那样，IE 的问题与媒体查询无关。
因此，我更新了旧标题:(“IE 中的媒体查询 GLITCH”)为当前标题。 (也感谢一些 meta advice )
为了确定，我创建了一个新的 FIDDLE仅包含 calc 函数，并且很低，看吧 - 我在 IE 中看到了与我在最初的媒体查询 fiddle 中所做的相同的(错误的)行为。
此外，我注意到一个有趣的观察结果是，只有当我在计算操作中使用除法时才会发生这种情况，但如果我使用更简单的东西，比如 calc(100% - x px) -
IE 处理它确定。
我正在使用媒体查询来证明框列表的合理性。
基本上，我为每个 #columns 状态设置了一个媒体查询，然后我在其中使用 calc() 计算出每个元素的 margin-right(最后一个元素除外)专栏)。
这是 fiddle
现在这在 chrome 和 firefox 中运行良好 - 但当我在 IE9+ 中运行时
我发现媒体查询状态之间存在故障(包括闪烁和不服从媒体查询)。
这是我正在谈论的截图
[在浏览器窗口宽度为 710px 时截取的屏幕截图]:
这是 IE 错误还是我做错了什么？
最佳答案
修复:
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;
}
}
编辑:
我为媒体查询添加了颜色，以帮助解决问题的根源并将它们排除在外。我还排除了兼容模式是导致此问题的原因，您的计算格式看起来很好。
take a look at the updated fiddle
如果媒体查询中断，我们也会看到颜色闪烁不一致......这让我相信这是一个特定于我们的边距/间距定义的数学计算错误......即将进行进一步调查
我在 ie 中遇到了一些关于媒体查询的问题......一些值得一提的错误是
兼容模式 - 确保关闭它可能会导致意外行为或完全破坏媒体查询
doctype - 不声明或没有 html5 doctype 可能是导致更多媒体查询不一致的原因
<!DOCTYPE html>
我注意到你正在使用 calc() 我的第一 react 是确保所有数学运算符都被空格包围......这是我遇到的另一个问题，其中
calc(2px+5px)
在正确的语法应该出现的地方有失败的倾向
calc(2px + 5px)
关于IE 中的 css calc 函数错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16658482/