2010年11月13日 星期六

[CSS Hack] Google chrome CSS hack 快速修正所有瀏覽器技巧

從上一次壞掉的印表機用一個class的css hack搞定所有瀏覽器之後,這次問題又來了,這次遇到了Googl chrome瀏覽器跟其他瀏覽器的畫面有所差異,懶得改架構,那就再來用css hack解決吧,查遍網路上面的文章都沒有用一個class搞定的,這可真是棘手,早期壞掉的印表機用兩個class來設定的作法,不管是在檔案大小上面,或者是css的維護上面都非常的不方便,再怎麼樣都盡量用一個class的css hack技巧來修正,我想這會是比較好又快速的作法,現在就來看看怎麼設定吧~
.className {

font-size:12px; \*這一行所有瀏覽器都看得懂,所以是給Firefox套用的*\
font-size:14px\9; \*這一行則是所有的ie都看得懂*\
[;font-size:16px;] \*這一行專門給Chrome跟Safari用,不過IE6跟7也看得懂喔*\
*font-size:18px; \*這一行給ie7*\
_font-size:20px; \*這一行給ie6*\
}
上面的設定中,壞掉的印表機提醒各位要注意到順序的問題,給Google Chrome跟Apple Safari使用的css hack一定要寫在ie8的設定後面,若是沒有依照此種順序,將會造成後續ie6與ie7的css hack設定無效,切記切記阿~此文章由壞掉的印表機-設計、生活、態度發表
此外~倘若許多的css設定中,只有ie8需要修正的話,也可以利用ie8才看的懂的css hack來解決,這樣可以省下至少兩行的css設定。以下設定是只有ie8會看的懂,其他版本的ie或其他家的瀏覽器都看不懂
font-size:14px\0;   \*這一行只有ie8看得懂*\
雖然有許多人對於 css hack 是厭惡到了極點,但是就實務上面來說,壞掉的印表機認為,畢竟瀏覽器的缺點不是我們能控制的,標準的制定也是看各家瀏覽器要不要遵守,如果估計沒有錯的話,所有的瀏覽器勢必演化到最後,必然是都會盡量符合網頁標準的,所以在一個專案的經費與時間都有壓力的情況下,快速的利用css hack來解決個瀏覽器之間的問題,我想是符合經濟效益的,此外,以正規的作法與觀念來說,盡量少用css hack是正確的,但是倘若為了少用css hack而增加div的層次或多餘的原始碼的話,我想這樣的網頁設計不見得會比較好阿~
祝各位使用愉快啦~此文章由壞掉的印表機-設計、生活、態度發表

1 則留言:

壞掉的印表機 提到...

忘了寫到~IE8專屬CSS HACK
font-size:14px\0;