你對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)