現在浏覽器多了,做web頁面還是比較痛苦的,當然,如果你不在乎自己做的頁面在有些浏覽器上面慘不忍睹那也是種不錯的心態(至少少了點頭痛的機會),可是你老板或者上司或者你的用戶同意嗎?-__!
下面我就介紹我知道的hack方法吧。我現在比較常用的,並且感覺用的不動腦子的方法是:
#yourId/.yourClass {/*normal*/}
* Html #yourId/.yourClass {/*IE6 and below*/}
*+Html #yourId/.yourClass {/*IE7 only*/}
@media all and (min-width:0px){
#yourId/.yourClass { /*Opera*/ }
}
用法:直接寫CSS,用Firefox作為第一浏覽器看效果,然後IE6下不一樣,就用* HTML重寫那個ID容器或者類;如果IE 7不一樣,就用*+Html重寫,如果Opera下面不一樣,就用@media那個,當然這寫重寫的需要放在原來的後面。呵呵,就這麼簡單。這個方法用了之後可能會上瘾,可是會有諸如增加CSS文件容量等不爽,甚至有時候還會出現直接用這個寫幾段不同的。所以還是建議能熟悉了解個浏覽器具體是在什麼屬性上支持不一樣(例如border寬度IE6認為是不能算在width裡面的,但是Firefox是認為算width一起的),先盡力寫幾個浏覽器通用的 CSS,不到必不得已不用這個hack方法。
原理:Firefox認為是CSS語法錯誤,所以忽略。但是不同IE版本識別不同,不忽略,所以能實現hack,並且*+Html還能通過W3C驗證,呵呵,爽吧。Opera那個就不多說了,也是類似原理,但是看起來比較崩潰,要說明的是, Firefox下沒問題的話,Opera基本也沒什麼問題的,所以不太會用到這個hack。
還需要其他浏覽器hack方法?抱歉,我就知道這麼多,因為我電腦上只有這麼幾個浏覽器,呵呵,公司要求或者我自己想要把握的用戶群夠了。
另外就是!important這個方法了(Firefox遇到這個優先級就最高,但是IE6不認,所以下面重新定義可以覆蓋),不過這個貌似是以前甚至現在都很多人在用的,但是我個人感覺不是很爽,不能像上面的那樣明確的搞定某個浏覽器。比如現在IE7對規范CSS支持已經比IE6好了不知道多少,但是還是會有和Firefox有的差異,所以用important的方式,控制起來並不像上面的那麼一目了然。