CSS碎碎念之瀏覽器相容性處理

比起程式效能好不好、功能合不合適、介面好不好用
更多人關心的是頁面漂不漂亮、格式正不正常
基於這個大家都關心的議題上
在手頭上有個未爆彈還沒爆發的這時
今天被另一個流彈波及

業主傳來版面有問題的訊息
好吧
你沒發現我也不會主動說的確是有問題
畢竟不是我做的
而且手頭也有其他的事要忙
但是我還是得負責擦屁股
既然被你發現我也只好乖乖認帳
業主一開始還交叉測試了FF跟IE
認定不是瀏覽器的問題
害我ㄧ度搞了很久
最後才發現是在某個解析度以下產生的瀏覽器的不相容
肇事者當然是CSS嚕
不
應該說是這個頁面的原作吧
CSS是無辜的

#div_a
{
top:10px;
top:20px \9;
*top:30px;
_top:40px;
}

直接來吧
第一行是所有瀏覽器都可以讀得到的
但讀得到不表示會顯示相同的東西
所以第二行後面加了"\9"只有IE系列讀的到
用來修正FF(或其他瀏覽器)跟IE系列之間的差異
當然兄弟鬩牆是常有的事
特別是在IE8、7、6之間
IE7、6可以辨識行頭的"*"
IE8不行
所以第二行是給IE8用的
而IE6又能夠辨識行頭的"_"
其他瀏覽器不行
所以第四行只有IE6可以讀得到
第三行就留給IE7了
以此類推
能相容越少辨識關鍵字的語法放在最前面
依序往下寫
真的要搞到四行那也只有認了

好在今天的問題只要解決FF跟IE系列的差異
那在另一個未爆彈沒引爆之前
我們就說好先不提了 XD