h5bp/mobile-boilerplate — Issue #100: IE6 CSS hacks breaking Nokia S60
Author: sergiolopes
Created: 2012-02-25 20:35:02+00:00
State: open

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.