修正FireFox的CSS HACKER

最近新版的FIREFOX 3 正式發表了,卻發現他與舊版的FIREFOX在對LAYOUT的解析上有些許的不同,為了要讓使用者在瀏覽網頁時有一致的視覺,就要針對FF3下HACK。
如下:


CSS hack for Firefox only


These hacks don't validate, but are 100% safe according to CSS parsing rules.
Before you hack anything, make sure you're hacking because of a browser bug, not because you failed to understand how particular CSS feature should work. Check the specification and compare results with Opera and Safari first!
Firefox 2.0 or older
If you need to make pre-Acid2 Firefox behave, you can safely use this:
#hackme, x:-moz-any-link {styles for Firefox 2.0 here}
#hackme, x:-moz-any-link, x:default {restore styles for Firefox 3.0 and newer}
This hack will apply rules to #hackme element. You can change the first selector (#hackme) in each rule to anything else, but don't touch the ones with x.

Example
For 9 versions support for inline-block in Gecko was FUBAR. The closest equivalent wouldn't respect line-height. The workaround:

#menu a {display:inline-block; line-height:2em;}
#menu a, x:-moz-any-link {display:-moz-inline-box; padding-top:0.5em;}
#menu a, x:-moz-any-link, x:default {display:inline-block; padding-top:0;}
Firefox 1.0 or older
#hackme, x:-moz-any-link {styles for Firefox 1.0 here}
#hackme, x:-moz-any-link, x:only-child {restore normal styles for newer versions}
Same as above — you can change #hackme to whatever you need, but leave other selectors in the same group as they are.

How do these work?
CSS error handling rules require browsers to drop entire rule if any of the selectors is not recognized. :-moz-any-link is a selector private to Gecko, so all non-Gecko browsers see it as parse error. :default has been added in Firefox 3.0 (Gecko 1.9), :only-child has been added in Firefox 1.5, so they're unknown to earlier versions of Firefox/Gecko.

張貼留言

這個網誌中的熱門文章

互補色與對比色解惑

[讀書心得] 設計思維 Design Thinking

龍岡手繪地圖製作有感