新聞中心
你對IE7和IE8的CSS樣式八大差異是否了解,這里和大家分享一下,IE7所設(shè)計(jì)的網(wǎng)頁,在IE8上的呈現(xiàn)會(huì)有所出入,所幸拜IE7相容檢視功能所賜,目前因使用IE8而導(dǎo)致版面錯(cuò)誤的網(wǎng)站并不多。

當(dāng)雄ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景,ssl證書未來市場廣闊!成為創(chuàng)新互聯(lián)的ssl證書銷售渠道,可以享受市場價(jià)格4-6折優(yōu)惠!如果有意向歡迎電話聯(lián)系或者加微信:028-86922220(備注:SSL證書合作)期待與您的合作!
IE7和IE8的CSS樣式八大差異
InternetExplorer8預(yù)設(shè)是以CSS2.1為標(biāo)準(zhǔn),并修正了許多InternetExplorer7的CSSBug,這意味著有一部份以往依據(jù)IE7所設(shè)計(jì)的網(wǎng)頁,在IE8上的呈現(xiàn)會(huì)有所出入,所幸拜IE7相容檢視功能所賜,目前因使用IE8而導(dǎo)致版面錯(cuò)誤的網(wǎng)站并不多。但一值依賴IE7相容檢視功能并非長久之計(jì),盡早將網(wǎng)站修改為IE8相容才是長久之計(jì),因?yàn)楫吘笴SS是持續(xù)更新的,現(xiàn)在不改,日后大修的機(jī)會(huì)就更大。不幸的是,Microsoft官方并未提供關(guān)于IE7及IE8的CSS差異說明文件,頂多只是告訴我們IE8目前更趨近于CSS2.1而非CSS2.0,因此筆者在造訪許多網(wǎng)站后,規(guī)類出8個(gè)最常見的差異供讀者們參考。
1、起始座標(biāo)位置
先天上,IE7與IE8在預(yù)設(shè)網(wǎng)頁版面的起始位置就不同,以下面的代碼來說,在IE7及IE8上啟始的位置就有差異。
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
title> - head>
Hinet a> - div>
- div>
- body>
- html>
不過由于是整個(gè)偏移,對網(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">
title> - head>
TESTFont p>
- 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">
title> - head>
TESTFont p> - 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">
title> - head>
Hinet a> - div>
- div>
- body>
- html>
由比較圖可看出,IE7遭遇負(fù)數(shù)時(shí),并不會(huì)移出DIV的范圍,而IE8會(huì),在筆者撰寫本文之時(shí),大多數(shù)的不相容IE8網(wǎng)頁錯(cuò)誤都源自于此。
4、TableWithBorderStyle
元素的Layout在每個(gè)瀏覽器上都會(huì)有些許差異的表現(xiàn),下面的代碼是一個(gè)在IE7及IE8上呈現(xiàn)相異的范例。Table
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
title> - head>
a td> a td> a td> - tr>
a td> a td> a td> - tr>
a td> a td> a td> - tr>
- table>
- body>
- html>
很明顯的,IE7的border寬度計(jì)算比IE8高,不過由于這是整體偏移,加上我們很少會(huì)設(shè)定太大的border寬度,影響程度幾乎等于0。#p#
5、bottom、top
當(dāng)使用絕對位置時(shí),IE7與IE8會(huì)產(chǎn)生些許的偏移,這些偏移是整體性的,所以影響很小
例子:
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
title> - head>
- 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">
title> - head>
- TEST1 li>
- TEST2 li>
- TEST3 li>
- TEST4 li>
- TEST5 li>
- ul>
- div>
- div>
- body>
- html>
在IE7上,LI的項(xiàng)目符號(hào)被取消了,而在IE8上則正常顯示,但卻因?yàn)槭莊loat,所以后面的項(xiàng)目符號(hào)蓋到前一項(xiàng)目了。修改為程式8的模樣后
,兩者就趨近相同了。
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
title> - head>
- TEST1 li>
- TEST2 li>
- TEST3 li>
- TEST4 li>
- TEST5 li>
- ul>
- div>
- div>
- body>
- html>
在嘗試尋找CSS相異點(diǎn)時(shí),許多網(wǎng)站都有這類問題,因?yàn)槲覀兂S眠@種手法來處理頁簽類的顯示。
PS:list-style-type在IE7時(shí),只要li是float,就會(huì)被完全忽略。#p#7、div+heightwithulandimage
當(dāng)DIV設(shè)定了固定大小,而內(nèi)容超出所定大小,然后后方跟著IMG時(shí),在IE7及IE8會(huì)有相當(dāng)大的差異。
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
title> - head>
- TEST1 li>
- TEST2 li>
- TEST3 li>
- TEST4 li>
- TEST5 li>
- TEST6 li>
- ul>
- div>
- a>
- div>
- body>
- html>
很明顯的,IE7會(huì)尊重DIV所制定的大小來安排后面的IMG位置,所以在圖14上看不出有何問題,但是在IE8里,當(dāng)內(nèi)容超出制定大小時(shí),
IMG位置會(huì)順移開,所以就造成了此問題。在實(shí)務(wù)上,這算是相當(dāng)常見的相容性錯(cuò)誤。
解決方法很簡單,將要被蓋住的那個(gè)LI移掉就好了,這本來就是錯(cuò)誤的設(shè)計(jì)。8、p的子控件對齊
有些網(wǎng)頁設(shè)計(jì)師習(xí)慣使用P加上子控件來描繪單行輸入+按紐的樣式,這些網(wǎng)頁在IE8上會(huì)有或許的差異,如果里面使用的IMG太多,
差異就會(huì)大到很難忽視。
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
title> - head>
- p>
- body>
- html>
很明顯,IE7會(huì)對IMG置中于P,但I(xiàn)E8不會(huì)。這類問題很難解決,需要透過CSS判斷IE版本來提供不同的CSS,讓兩者趨近相同。
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
title> - 淺析CSS在IE6、IE7、IE8中的兼容差異 本文向大家介紹一下CSS在IE6、IE7、IE8中的兼容差異解析,關(guān)于瀏覽器的最離奇的統(tǒng)計(jì)結(jié)果之一就是InternetExplorer版本IE6,IE7和IE8共存。
2010-08-18 10:37:16
IE6 IE7 IE8
當(dāng)前名稱:IE7和IE8的CSS樣式八大差異
網(wǎng)頁鏈接:http://m.5511xx.com/article/djhepss.html


咨詢
建站咨詢
