IE6 CSS hacks breaking Nokia S60

[sergiolopes]

MBP uses star hack a lot to target IE6, but it breaks Symbian S60 3.x browsers, like the N95 one.

The problem occurs when we use a CSS compressor that strips the last semi-colon and when the last rule is a star hack rule. For example:

This original CSS:

button, input { line-height: normal; *overflow: visible; }

Is minified to this:

button,input{line-height:normal;*overflow:visible}

Because the last rule is a start hack one and the semi-collon is missing, S60 browsers will skip the entire line. And since we are minifing everything into one line, it skips the entire stylesheet, rendering an unstyled page.

The solution is simple: just reverse the order so that no star hack rule is the last one:

button, input { *overflow: visible; line-height: normal; }

This line will be minified to this:

button,input{*overflow:visible;line-height:normal}

And that's ok, works fine on Nokia's browsers.

One last note: I think this is not an YUI compressor issue, since it's perfectly valid to strip the last semi-colon. But since that breaks a mobile browser, I think it's a MBP issue.

And of course, the definitive fix is to remove all CSS hacks and target IE6 with safer conditional comments.

[mathiasbynens]

FWIW, I filed a bug with YUI Compressor for this, in case they would like to fix it on their end: http://yuilibrary.com/projects/yuicompressor/ticket/2528146

The * hack is used to target IE7 and IE6. Did you try the _ hack for IE6? Does it have the same issue?

[sergiolopes]

The underscore hack works fine. It can be the last one or not, everything works.

[sergiolopes]

I sent a pull request with the proposed changes and GitHub created another issue - #101

[alexgibson]

Closing this as the issue will be addressed in an update to normalize.css