[IE8] 8個讓你網頁不相容IE 8的CSS樣式寫法

Internet Explorer 8預設是以CSS 2.1為標準,並修正了許多Internet Explorer 7的CSS Bug,這意味著有一部份以往依據IE 7所設計的網頁,
在IE 8上的呈現會有所出入,所幸拜IE 7相容檢視功能所賜,目前因使用IE 8而導致版面錯誤的網站並不多。

 

 
8個讓你網頁不相容IE 8CSS樣式寫法
 
 
/黃忠成
 
   Internet Explorer 8預設是以CSS 2.1為標準,並修正了許多Internet Explorer 7CSS Bug,這意味著有一部份以往依據IE 7所設計的網頁,
IE 8上的呈現會有所出入,所幸拜IE 7相容檢視功能所賜,目前因使用IE 8而導致版面錯誤的網站並不多。
 
  但一值依賴IE 7相容檢視功能並非長久之計,盡早將網站修改為IE 8相容才是長久之計,因為畢竟CSS是持續更新的,現在不改,日後大修的機會就更大。
不幸的是,Microsoft官方並未提供關於IE 7IE 8CSS差異說明文件,頂多只是告訴我們IE 8目前更趨近於CSS 2.1而非CSS 2.0,因此筆者在造訪許多網站後,
規類出8個最常見的差異供讀者們參考。
 
 
 
1、起始座標位置
 
 先天上,IE 7IE 8在預設網頁版面的起始位置就不同,以程式一來說,在IE 7IE 8上啟始的位置就有差異。
 
程式1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div style="height:100px;width:200px; border: solid 1px black">
      <div>
        <a href="http://www.hinet.net">Hinet</a>
      </div>
    </div>
</body>
</html>
1 (IE7)
2(IE8)
不過由於是整個偏移,對網頁的影響相當小。
 
 
 
2DIV中的P
 
 程式2的執行結果呈現了IE 7IE 8在處理DIV中的P之差異性。
 
程式2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div style="height:100px;width:200px; border: solid 1px black">
      <div>
        <p>TEST Font</p>
      </div>
    </div>
</body>
</html>
 
3(IE 7)
4(IE 8)
  很明顯的,IE 8中對於DIV中的P預設位置與IE 7不同,IE 7是將margin-top預設為0px,排在最上方,,IE 8卻未預設margin-top
解決方法是將margin-top加上。
 
程式3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div style="height:100px;width:200px; border: solid 1px black">
      <div>
        <p style="margin-top:0px">TEST Font</p>
      </div>
    </div>
</body>
</html>
 
 
5(IE 8 With margin-top)
 
 
3、負數margin
 
 許多網頁設計師常常以負數的margin來定位HTML元素的位置,目的是讓該元素與圖形對齊,IE 7IE 8對於負數的解釋有蠻大的差異性。
 
程式4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div style="height:100px;width:200px; border: solid 1px black">
      <div style="background-color:Red;margin: -5px 6px 7px 8px">
        <a href="http://www.hinet.net" >Hinet</a>
      </div>
    </div>
</body>
</html>
 
6(IE 7)
7(IE8)
由比較圖可看出,IE 7遭遇負數時,並不會移出DIV的範圍,而IE 8會,在筆者撰寫本文之時,大多數的不相容IE8網頁錯誤都源自於此。
 
 
 
 
 
 
4Table With Border Style
 
   元素的Layout在每個瀏覽器上都會有些許差異的表現,程式5是一個在IE 7IE 8上呈現相異的範例。Table
程式5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <table style="border: double 7px green">
    <tr>
    <td style="border: double 1px green">a</td>
    <td style="border: double 1px green">a</td>
    <td style="border: double 1px green">a</td>
    </tr>
    <tr>
    <td style="border: double 1px green">a</td>
    <td style="border: double 1px green">a</td>
    <td style="border: double 1px green">a</td>
    </tr>
    <tr>
    <td style="border: double 1px green">a</td>
    <td style="border: double 1px green">a</td>
    <td style="border: double 1px green">a</td>
    </tr>
    </table>
</body>
</html>
8(IE 7)
9(IE 8)
很明顯的,IE 7border寬度計算比IE 8高,不過由於這是整體偏移,加上我們很少會設定太大的border寬度,影響程度幾乎等於0
 
5bottomtop
 
 當使用絕對位置時,IE 7IE 8會產生些許的偏移,這些偏移是整體性的,所以影響很小,程式6是這樣一個例子。
程式6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<div style="height:100px;width:200px; border: solid 1px black">
      <div style="background-color:Red; bottom:5px; top:5px; position:absolute;height:40px" >
      TEST
      </div>
    </div>
</body>
</html>
10(IE 7)
11(IE 8)
很難看出來吧,因為偏移很小,不過確實是偏移了。
 
 
 
6li + float
 
 ULLI加上float,在IE 7IE 8有相當大的差異,見程式7
程式7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<div>
    <div>
        <ul>
            <li style="cursor: hand;float:left; " >
                TEST1 </li>
            <li style="cursor: hand;float:left; ">
                TEST2 </li>
            <li style="cursor: hand;float:left; ">
                TEST3 </li>
            <li style="cursor: hand;float:left; ">
                TEST4 </li>
            <li style="cursor: hand;float:left; ">
                TEST5 </li>
        </ul>       
    </div>
    </div>
</body>
</html>
12(IE 7)
13(IE 8)
IE 7上,LI的項目符號被取消了,而在IE 8上則正常顯示,但卻因為是float,所以後面的項目符號蓋到前一項目了。修改為程式8的模樣後,
兩者就趨近相同了。
程式8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<div>
    <div>
        <ul style="list-style-type:none">
            <li style="cursor: hand;float:left; " >
                TEST1 </li>
            <li style="cursor: hand;float:left; ">
                TEST2 </li>
            <li style="cursor: hand;float:left; ">
                TEST3 </li>
            <li style="cursor: hand;float:left; ">
                TEST4 </li>
            <li style="cursor: hand;float:left; ">
                TEST5 </li>
        </ul>       
    </div>
    </div>
</body>
</html>
在嘗試尋找CSS相異點時,許多網站都有這類問題,因為我們常用這種手法來處理頁籤類的顯示。
PS: list-style-typeIE7時,只要lifloat,就會被完全忽略。
 
 
 
7div + height with ul and image
 
   DIV設定了固定大小,而內容超出所定大小,然後後方跟著IMG時,在IE 7IE 8會有相當大的差異。
程式9
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<div>
    <div style="width:300px;height:22px; margin-top:5px">
        <ul style="list-style-type:none">
            <li style="cursor: hand;float:left; " >
                TEST1 </li>
            <li style="cursor: hand;float:left; ">
                TEST2 </li>
            <li style="cursor: hand;float:left; ">
                TEST3 </li>
            <li style="cursor: hand;float:left; ">
                TEST4 </li>
            <li style="cursor: hand;float:left; ">
                TEST5 </li>
            <li style="cursor: hand;float:left; ">
                TEST6 </li>
        </ul>       
    </div>
    <a href="http://www.hinet.net>">
    <img src="21565.jpg" width="300px" height="200px" />
    </a>
    </div>
</body>
</html>
14(IE 7)
15(IE 8)
很明顯的,IE 7會尊重DIV所製定的大小來安排後面的IMG位置,所以在圖14上看不出有何問題,但是在IE 8裡,當內容超出製定大小時,
IMG位置會順移開,所以就造成了此問題。在實務上,這算是相當常見的相容性錯誤。
解決方法很簡單,將要被蓋住的那個LI移掉就好了,這本來就是錯誤的設計。
 
 
 
8p 的子控件對齊 
 有些網頁設計師習慣使用P加上子控件來描繪單行輸入+按紐的樣式,這些網頁在IE 8上會有或許的差異,如果裡面使用的IMG太多,
差異就會大到很難忽視。
 
程式10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <p>
      <input type="text" />
      <img src="add2.png" height="16px" width="16px" />
    </p>
</body>
</html>
16(IE 7)
17(IE 8)
很明顯,IE 7會對IMG置中於P,但IE 8不會。這類問題很難解決,需要透過CSS判斷IE版本來提供不同的CSS,讓兩者趨近相同。
 
程式11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <!--[if gte IE 8]>
    <style type="text/css">       
        .c1
        {
            position:relative;top:3px
        }
    </style>
    <![endif]-->
    <!--[if lt IE 8]>
    <style type="text/css">       
        .c1
        {
           
        }
    </style>
    <![endif]-->
</head>
<body>
    <p>
      <input type="text"/>
      <img src="add2.png" height="16px" width="16px" class="c1" />
    </p>
</body>
</html>