CSS Minification problem (Internet Explorer) - Foundation - "0px;" versus "0;"

Dave Forster asked on March 8, 2016 10:05

Hi,

We've noticed a problem with CSS Minification that only seems to affect IE 10/11 (not interested in anything older). It seems specific to some (zurb) foundation classes too.

For example, the following style works fine in all browsers when minification is turned OFF.

@media screen and (min-width: 64em) {
  .large-expand {
    flex: 1 1 0px;
  }
}

However, when it's turned ON, the unit identifier "px" gets removed leaving "flex:1 1 0"

This still works in the likes of Chrome/FF but IE doesn't like this at all... it only likes the 0px. There are other similar examples of this happening thoughout - i've just used the previous css snippet as an example.

My question is.. anyone had similar experiences with minification oddities? And, are there any options/rules available to control the minification process - other than turning it off completely?

minification css

Correct Answer

emma zelewsky answered on March 8, 2016 19:24

We haven't seen any quirks with the CSS minification, but what you could do is use the HeadHTML webpart and add styles separate from the CSS resource that's being minified. Those separate styles won't be minified.

However, with flex your best bet is to use the longhand declaration (details on MDN). IE 10 and 11 have a bug that chokes on the shorthand flex -- which MS has acknowledged.

Hope that helps!

1 votesVote for this answer Unmark Correct answer

Recent Answers

Dave Forster answered on March 9, 2016 10:15

Hi Emma,

Thanks for the info about the IE11 bug - great spot. I had in fact put a workaround similar to what you described, just overriding the minified styles for IE. My initial intention that this would be temporary however... I guess not :-)

Cheers

0 votesVote for this answer Mark as a Correct answer