internet explorer - css calc function bug in IE

Question

Welcome To Ask or Share your Answers For Others

internet explorer - css calc function bug in IE

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

internet explorer - css calc function bug in IE

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] :

enter image description here

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T03:07:51+0000

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)

Categories

internet explorer - css calc function bug in IE

internet explorer - css calc function bug in IE

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags