Pages

2011年5月15日 星期日

關於CSS HACK的一些建議

padding-left:5px;padding-left:0\9;*padding-left:5px;

前幾天在社團貼了這段code,一直沒時間好好把它寫完,趁現在沒事要忙來寫一下說明好了。這個狀況是發生在修改同事完成的頁面,姑且把它定義成區塊偏移了5px,在大部分瀏覽器都在他該在的地方,可是有個瀏覽器就是與眾不同,更有趣的是還自己跟自己不同,你應該知道我說哪個吧,不知道的話這篇文章就不用往下看囉。

這個特殊偏移現象只會發生在IE8,IE7不會偏移,至於IE6已經埋在土裡就不考慮了。padding-left:5px;是給所有瀏覽器看的,但IE8硬是多出5px,這時候已經不是去問這是誰寫的問題了,得先解決再說,所以就加了這一行padding-left:0\9;只有IE才看的懂的code,可是這樣會出問題啊,IE7是正常的怎麼辦?於是又多了這行*padding-left:5px;,因為這行code只有IE7看的懂,於是皆大歡喜,可是重點在哪?

重點在順序,一定要由大到小排列,IE8,IE7,IE6。為什麼順序重要,因為串接的關係,越後面出現的權限越大,如果對調順序會造成後面的值覆蓋掉前面的值,這樣會很難發現錯誤,明明程式碼都是正確的,畫面卻完全沒有任何改變,所以才要提醒大家在設定時要注意優先順序。

這樣的問題如果事先有做好瀏覽器的 Reset 通常是不會發生的,我非常少用到HACK的方法,但救急很好用,遇到這樣的問題通常會先跟視覺溝通取得一個較好的呈現方式,不是只能用HACK來解決問題,但如果非用不可就用吧。

沒有留言: