IE7和IE8的CSS樣式八大差異
你對IE7和IE8的CSS樣式八大差異是否了解，這里和大家分享一下，IE7所設(shè)計(jì)的網(wǎng)頁，在IE8上的呈現(xiàn)會有所出入，所幸拜IE7相容檢視功能所賜，目前因使用IE8而導(dǎo)致版面錯誤的網(wǎng)站并不多。
IE7和IE8的CSS樣式八大差異
InternetExplorer8預(yù)設(shè)是以CSS2.1為標(biāo)準(zhǔn)，并修正了許多InternetExplorer7的CSSBug，這意味著有一部份以往依據(jù)IE7所設(shè)計(jì)的網(wǎng)頁，在IE8上的呈現(xiàn)會有所出入，所幸拜IE7相容檢視功能所賜，目前因使用IE8而導(dǎo)致版面錯誤的網(wǎng)站并不多。但一值依賴IE7相容檢視功能并非長久之計(jì)，盡早將網(wǎng)站修改為IE8相容才是長久之計(jì)，因?yàn)楫吘笴SS是持續(xù)更新的，現(xiàn)在不改，日后大修的機(jī)會就更大。不幸的是，Microsoft官方并未提供關(guān)于IE7及IE8的CSS差異說明文件，頂多只是告訴我們IE8目前更趨近于CSS2.1而非CSS2.0，因此筆者在造訪許多網(wǎng)站后，規(guī)類出8個最常見的差異供讀者們參考。
1、起始座標(biāo)位置
先天上，IE7與IE8在預(yù)設(shè)網(wǎng)頁版面的起始位置就不同，以下面的代碼來說，在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>
不過由于是整個偏移，對網(wǎng)頁的影響相當(dāng)小。
2、DIV中的P
下面的執(zhí)行結(jié)果呈現(xiàn)了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預(yù)設(shè)位置與IE7不同，IE7是將margin-top預(yù)設(shè)為0px，排在最上方，，IE8卻未預(yù)設(shè)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、負(fù)數(shù)margin
許多網(wǎng)頁設(shè)計(jì)師常常以負(fù)數(shù)的margin來定位HTML元素的位置，目的是讓該元素與圖形對齊，IE7及IE8對于負(fù)數(shù)的解釋有蠻大的差異性。
程式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遭遇負(fù)數(shù)時，并不會移出DIV的范圍，而IE8會，在筆者撰寫本文之時，大多數(shù)的不相容IE8網(wǎng)頁錯誤都源自于此。
4、TableWithBorderStyle
元素的Layout在每個瀏覽器上都會有些許差異的表現(xiàn)，下面的代碼是一個在IE7及IE8上呈現(xiàn)相異的范例。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寬度計(jì)算比IE8高，不過由于這是整體偏移，加上我們很少會設(shè)定太大的border寬度，影響程度幾乎等于0。#p#
5、bottom、top
當(dāng)使用絕對位置時，IE7與IE8會產(chǎn)生些許的偏移，這些偏移是整體性的，所以影響很小
例子：
- "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>
很難看出來吧，因?yàn)槠坪苄。贿^確實(shí)是偏移了。
6、li+float
UL、LI加上float，在IE7于IE8有相當(dāng)大的差異，見：
- "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的項(xiàng)目符號被取消了，而在IE8上則正常顯示，但卻因?yàn)槭莊loat，所以后面的項(xiàng)目符號蓋到前一項(xiàng)目了。修改為程式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相異點(diǎn)時，許多網(wǎng)站都有這類問題，因?yàn)槲覀兂Ｓ眠@種手法來處理頁簽類的顯示。
PS:list-style-type在IE7時，只要li是float，就會被完全忽略。#p#
7、div+heightwithulandimage
當(dāng)DIV設(shè)定了固定大小，而內(nèi)容超出所定大小，然后后方跟著IMG時，在IE7及IE8會有相當(dāng)大的差異。
- "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里，當(dāng)內(nèi)容超出制定大小時，
IMG位置會順移開，所以就造成了此問題。在實(shí)務(wù)上，這算是相當(dāng)常見的相容性錯誤。
解決方法很簡單，將要被蓋住的那個LI移掉就好了，這本來就是錯誤的設(shè)計(jì)。
8、p的子控件對齊
有些網(wǎng)頁設(shè)計(jì)師習(xí)慣使用P加上子控件來描繪單行輸入+按紐的樣式，這些網(wǎng)頁在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，但I(xiàn)E8不會。這類問題很難解決，需要透過CSS判斷IE版本來提供不同的CSS，讓兩者趨近相同。
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>title>
