IE7和IE8的CSS樣式八大差異

作者：csdiv 2010-08-20 11:24:44

本文向大家描述一下IE7和IE8的CSS樣式八大差異，Microsoft官方并未提供關于IE7及IE8的CSS差異說明文件，只是說IE8目前更趨近于CSS2.1而非CSS2.0，這里規類出8個最常見的差異供讀者們參考。

你對IE7和IE8的CSS樣式八大差異是否了解，這里和大家分享一下，IE7所設計的網頁，在IE8上的呈現會有所出入，所幸拜IE7相容檢視功能所賜，目前因使用IE8而導致版面錯誤的網站并不多。

IE7和IE8的CSS樣式八大差異

InternetExplorer8預設是以CSS2.1為標準，并修正了許多InternetExplorer7的CSSBug，這意味著有一部份以往依據IE7所設計的網頁，在IE8上的呈現會有所出入，所幸拜IE7相容檢視功能所賜，目前因使用IE8而導致版面錯誤的網站并不多。但一值依賴IE7相容檢視功能并非長久之計，盡早將網站修改為IE8相容才是長久之計，因為畢竟CSS是持續更新的，現在不改，日后大修的機會就更大。不幸的是，Microsoft官方并未提供關于IE7及IE8的CSS差異說明文件，頂多只是告訴我們IE8目前更趨近于CSS2.1而非CSS2.0，因此筆者在造訪許多網站后，規類出8個最常見的差異供讀者們參考。

1、起始座標位置

先天上，IE7與IE8在預設網頁版面的起始位置就不同，以下面的代碼來說，在IE7及IE8上啟始的位置就有差異。


 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>title> 
head> 
<body> 
<divstyledivstyle="height:100px;width:200px;border:solid1pxblack"> 
<div> 
<ahrefahref="http://www.hinet.net">Hineta> 
div> 
div> 
body> 
html>

不過由于是整個偏移，對網頁的影響相當小。

2、DIV中的P

下面的執行結果呈現了IE7及IE8在處理DIV中的P之差異性。


 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>title> 
head> 
<body> 
<divstyledivstyle="height:100px;width:200px;border:solid1pxblack"> 
<div> 
<p>TESTFontp> 
div> 
div> 
body> 
html>

很明顯的，IE8中對于DIV中的P預設位置與IE7不同，IE7是將margin-top預設為0px，排在最上方，，IE8卻未預設margin-top，
解決方法是將margin-top加上。


 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>title> 
head> 
<body> 
<divstyledivstyle="height:100px;width:200px;border:solid1pxblack"> 
<div> 
<pstylepstyle="margin-top:0px">TESTFontp> 
div> 
div> 
body> 
html> 
(IE8Withmargin-top)

#p#3、負數margin

許多網頁設計師常常以負數的margin來定位HTML元素的位置，目的是讓該元素與圖形對齊，IE7及IE8對于負數的解釋有蠻大的差異性。
程式4


 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>title> 
head> 
<body> 
<divstyledivstyle="height:100px;width:200px;border:solid1pxblack"> 
<divstyledivstyle="background-color:Red;margin:-5px6px7px8px"> 
<ahrefahref="http://www.hinet.net">Hineta> 
div> 
div> 
body> 
html>

由比較圖可看出，IE7遭遇負數時，并不會移出DIV的范圍，而IE8會，在筆者撰寫本文之時，大多數的不相容IE8網頁錯誤都源自于此。

4、TableWithBorderStyle

元素的Layout在每個瀏覽器上都會有些許差異的表現，下面的代碼是一個在IE7及IE8上呈現相異的范例。Table


 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>title> 
head> 
<body> 
<tablestyletablestyle="border:double7pxgreen"> 
<tr> 
<tdstyletdstyle="border:double1pxgreen">atd> 
<tdstyletdstyle="border:double1pxgreen">atd> 
<tdstyletdstyle="border:double1pxgreen">atd> 
tr> 
<tr> 
<tdstyletdstyle="border:double1pxgreen">atd> 
<tdstyletdstyle="border:double1pxgreen">atd> 
<tdstyletdstyle="border:double1pxgreen">atd> 
tr> 
<tr> 
<tdstyletdstyle="border:double1pxgreen">atd> 
<tdstyletdstyle="border:double1pxgreen">atd> 
<tdstyletdstyle="border:double1pxgreen">atd> 
tr> 
table> 
body> 
html>

很明顯的，IE7的border寬度計算比IE8高，不過由于這是整體偏移，加上我們很少會設定太大的border寬度，影響程度幾乎等于0。#p#

5、bottom、top

當使用絕對位置時，IE7與IE8會產生些許的偏移，這些偏移是整體性的，所以影響很小
例子：


 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>title> 
head> 
<body> 
<divstyledivstyle="height:100px;width:200px;border:solid1pxblack"> 
<divstyledivstyle="background-color:Red;bottom:5px;top:5px;position:absolute;height:40px"> 
TEST  
div> 
div> 
body> 
html>

很難看出來吧，因為偏移很小，不過確實是偏移了。

6、li+float

UL、LI加上float，在IE7于IE8有相當大的差異，見：


 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>title> 
head> 
<body> 
<div> 
<div> 
<ul> 
<listylelistyle="cursor:hand;float:left;"> 
TEST1li> 
<listylelistyle="cursor:hand;float:left;"> 
TEST2li> 
<listylelistyle="cursor:hand;float:left;"> 
TEST3li> 
<listylelistyle="cursor:hand;float:left;"> 
TEST4li> 
<listylelistyle="cursor:hand;float:left;"> 
TEST5li> 
ul> 
div> 
div> 
body> 
html>

在IE7上，LI的項目符號被取消了，而在IE8上則正常顯示，但卻因為是float，所以后面的項目符號蓋到前一項目了。修改為程式8的模樣后
，兩者就趨近相同了。


 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>title> 
head> 
<body> 
<div> 
<div> 
<ulstyleulstyle="list-style-type:none"> 
<listylelistyle="cursor:hand;float:left;"> 
TEST1li> 
<listylelistyle="cursor:hand;float:left;"> 
TEST2li> 
<listylelistyle="cursor:hand;float:left;"> 
TEST3li> 
<listylelistyle="cursor:hand;float:left;"> 
TEST4li> 
<listylelistyle="cursor:hand;float:left;"> 
TEST5li> 
ul> 
div> 
div> 
body> 
html>

在嘗試尋找CSS相異點時，許多網站都有這類問題，因為我們常用這種手法來處理頁簽類的顯示。
PS:list-style-type在IE7時，只要li是float，就會被完全忽略。#p#

7、div+heightwithulandimage

當DIV設定了固定大小，而內容超出所定大小，然后后方跟著IMG時，在IE7及IE8會有相當大的差異。


 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>title> 
head> 
<body> 
<div> 
<divstyledivstyle="width:300px;height:22px;margin-top:5px"> 
<ulstyleulstyle="list-style-type:none"> 
<listylelistyle="cursor:hand;float:left;"> 
TEST1li> 
<listylelistyle="cursor:hand;float:left;"> 
TEST2li> 
<listylelistyle="cursor:hand;float:left;"> 
TEST3li> 
<listylelistyle="cursor:hand;float:left;"> 
TEST4li> 
<listylelistyle="cursor:hand;float:left;"> 
TEST5li> 
<listylelistyle="cursor:hand;float:left;"> 
TEST6li> 
ul> 
div> 
<ahrefahref="http://www.hinet.net>"> 
<imgsrcimgsrc="21565.jpg"width="300px"height="200px"/> 
a> 
div> 
body> 
html>

很明顯的，IE7會尊重DIV所制定的大小來安排后面的IMG位置，所以在圖14上看不出有何問題，但是在IE8里，當內容超出制定大小時，
IMG位置會順移開，所以就造成了此問題。在實務上，這算是相當常見的相容性錯誤。
解決方法很簡單，將要被蓋住的那個LI移掉就好了，這本來就是錯誤的設計。

8、p的子控件對齊

有些網頁設計師習慣使用P加上子控件來描繪單行輸入+按紐的樣式，這些網頁在IE8上會有或許的差異，如果里面使用的IMG太多，
差異就會大到很難忽視。


 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>title> 
head> 
<body> 
<p> 
<inputtypeinputtype="text"/> 
<imgsrcimgsrc="add2.png"height="16px"width="16px"/> 
p> 
body> 
html>

很明顯，IE7會對IMG置中于P，但IE8不會。這類問題很難解決，需要透過CSS判斷IE版本來提供不同的CSS，讓兩者趨近相同。


 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>title> 
 IE的CSS Bug列表(IE6,IE7和IE8)  
 本文總結列出了幾十個有關IE的CSSBug。列表中的鏈接指向相應的指南和解決方法（英文）。列表總結的Bug包括IE6、IE7與IE8。
 2009-08-13 10:12:07
 IE的CSS Bug