IE中的css calc函数bug [英] css calc function bug in IE

问题描述

编辑

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

因此，我更新了旧的标题：（media queries GLITCH in IE）。 （感谢一些

进一步调查数学我有一个hunch互联网浏览器有麻烦尝试做一些愚蠢（还有什么是新的），这是允许十进制值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; 
} 
} 
  

---

编辑：

为媒体查询添加了颜色，以帮助解决问题的根源，并排除了问题。 ive还排除了兼容模式，因为此问题的原因，您的calc格式化看起来很好。

看看更新的小提琴

是媒体查询打破我们会看到不一致的颜色闪烁...这导致我怀疑它是一个特定于我们的利润/间距定义的数学计算错误...进一步调查即将到来

---

我遇到了媒体查询的几个问题，即...值得一提的几个错误是

兼容性模式 - 确保这是关闭可以导致意外的行为或只是打断媒体查询一起

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

 <！DOCTYPE html> 
  

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

  calc（2px + 5px）
  

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

  calc（2px + 5px）
  

EDIT

As @Joe pointed out in his answer, the problem here with IE has nothing to do with media queries.

I have therefore updated the old title: ("media queries GLITCH in IE") with the current one. (thanks also to some meta advice)

Just to be sure, I created a new FIDDLE containing just the calc function, and low and behold - I see the same (bad) behavior in IE as I did in my original fiddle with the media queries.

Also, one interesting observation which I noticed was that this only happens when I use division in the calc operation, but if I use something simpler like calc(100% - x px) - IE handles it ok.

---

I am using media queries to justify a list of boxes.

Basically, I set up a media query for each #columns states, where I then use calc() to work out the margin-right on each of the elements (except the ones in the last column).

Here's the fiddle

Now this is working fine in chrome and firefox - but when I run this in IE9+

I see a glitch between media query states (including flickering and disobeying the media queries).

Here is a screenshot of what i'm talking about

[screenshot taken at browser window width of 710px] :

Is this an IE bug or have I done something wrong?

解决方案

FIX:

here is a smoothly working jsfiddle of my solution

further investigating the math i had a hunch internet explorer is having trouble trying to do something stupid ( what else is new ), and that was to allow decimal values ie margin-left:250.123px; thus causing VERY miniscule inconsistencies and ruining your layout.

to correct this issue i temporarily subtracted 1px from all of your calculations and everything is looking smooth as can be

@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;
  }
}

---

EDIT:

ive added colors to the media queries to help troubleshoot the source of the problem and have ruled them out as the issue. ive also ruled out compatibility mode as the cause of this issue and your calc formatting looks just fine.

take a look at the updated fiddle

were the media queries breaking we would see inconsistencies in the color flickering as well... this leads me to beleive it is a mathematical calculation error specific to our margin / spacing definitions... further investigating coming soon

---

i have encountered a few issues with media queries in ie... a few bugs worth mentioning are

compatibility mode - make sure this is turned off can cause unexpected behavior or just break media queries all together

doctype - not declaring one or not having an html5 doctype can be the cause of even more media query inconsistencies

<!DOCTYPE html>

ive noticed you are using calc() my first reaction was to make sure all mathematical operators are surrounded by white space... this is another issues ive encountered, where

calc(2px+5px)

has the tendency to fail where the proper syntax should be

calc(2px + 5px)

这篇关于IE中的css calc函数bug的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！