做過網站的朋友,想必都有過被IE搞到不成人形的經驗。這邊簡單介紹一下如何開發出各版本IE適用的網站頁面。
1. CSS權重規則
如果在CSS裡面,設定了不同樣式都可以套用到同一個頁面元件上,哪一個樣式會被採用?舉個下面這個例子,這個
裡面的字會變成什麼顏色?
<style>
#box1 {
color:black;
color: red;
}
.box {color: blue}
div {color: yellow}
</style>
...
<div id="box1" class="box">內容</div>
答案是紅色。為什麼呢?因為CSS會依下列權重選擇要套用的樣式:
1. ID會優先選用 (例如這邊的#box1)
2. class其次 (假設刪掉範例中的#box1, 顏色會變成.box定義的blue)
3. 如果權重相似的,會以後面的為主(所以會採用#box1裡後面定義的red)
除了上面三個,最後還有一張王牌 – !important
,但是因為會造成日後debug的困難,所以不建議使用。用法如下:
.box {color: blue!important;}
2. 各版本IE專用的特定符號
一開始是IE設計上的小問題,日後衍生成網頁開發者不可或缺的工具 – IE hack!在CSS的定義裡面,加上特殊符號之後,這些設定值就會變成IE專用的!舉個例子:
.box {
color: red;
_color: blue;
}
如果用了上面這個定義,在IE 6下面,字體會變成藍色,而其他所有瀏覽器會顯示為紅色。因為字元前面加個下引線”_”,IE6會裝做沒看見這個特殊字元,繼續讀該行後面的內容(color: blue); 而其他所有瀏覽器遇到這個特殊符號則會直接忽略整行。
這邊以color: blue做範例,各版IE會吃下列的特殊符號:
IE6, 7, 8 – 分號之前加上\9: color: blue\9;
IE6, 7 – 每行開頭加上星號*: *color: blue;
IE6 – 每行開頭加下引線_: _color: blue;
值得注意的是裡面幾個特殊符號是可以同時套用到不同版本的IE上的,這時候,前面提到的權重就派上用場啦!如果要把一個網頁元件做出給各版IE的樣式,那就是這樣:
.box {
color: red; /* 標準的設定 */
color: blue\9; /* IE6,7,8適用 */
*color: yellow; /* IE6,7適用,因此在IE6與7上面,這個設定會蓋掉上面的 */
_color: black; /* IE6適用 */
}
3. 推薦作法
有了IE 破解大法之後,雖然會費點功夫,但是做起網頁就不擔心各瀏覽器顯示出來的東西差太多的問題啦!這裡以阿財的經驗,推薦大家開發網頁的幾個守則:
1. 先以Firefox, Chrome或Safari為基準做開發
2. 依序在IE8、7與6版上做測試,視情況加上IE hack
3. 避免在HTML裡面使用 <!--[if IE]><![endif]-->
這樣的解決方式,一來因為醜,二來會變慢,三來也不好維護。(貝哥哥網站也用了這個禁忌,但一直沒空修理)