首頁 > 開發者 > CSS

IE7和IE8的CSS樣式不相容

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

IE7和IE8的CSS樣式不相容nternet Explorer 8預設是以CSS 2.1為標準，並修正了許多Internet Explorer 7的CSS Bug，這意味著有一部份以往依據IE 7所設計的網頁，在IE 8上的呈現會有所出入，所幸拜IE 7相容檢視功能所賜，目前因使用IE 8而導致版面錯誤的網站並不多。但一值依賴IE 7相容檢視功能並非長久之計，儘早將網站修改為IE 8相容才是長久之計，因為畢竟CSS是持續更新的，現在不改，日後大修的機會就更大。不幸的是，Microsoft官方並未提供關於IE 7及IE 8的CSS差異說明檔案，頂多隻是告訴我們IE 8目前更趨近於CSS 2.1而非CSS 2.0，因此筆者在造訪許多網站後，規類出8個最常見的差異供讀者們參考。

1、起始座標位置

先天上，IE 7與IE 8在預設網頁版面的起始位置就不同，以下面的代碼來說，在IE 7及IE 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 style="height:100px;width:200px; border: solid 1px black">
<div>
<a href="http://www.hinet.net">Hinet</a>
</div>
</div>
</body>
</html>

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

2、DIV中的P

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

<!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>

很明顯的，IE 8中對於DIV中的P預設位置與IE 7不同，IE 7是將margin-top預設為0px，排在最上方，，IE 8卻未預設margin-top，

解決方案是將margin-top加上。

<!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>

(IE 8 With margin-top)

3、負數margin

許多網頁設計師常常以負數的margin來定位HTML元素的位置，目的是讓該元素與圖形對齊，IE 7及IE 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>

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

4、Table With Border Style

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

<!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>

很明顯的，IE 7的border寬度計算比IE 8高，不過由於這是整體位移，加上我們很少會設定太大的border寬度，影響程度幾乎等於0。

5、bottom、top

當使用絕對位置時，IE 7與IE 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 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>

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

6、li + float

UL、LI加上float，在IE 7於IE 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>
<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>

在IE 7上，LI的項目符號被取消了，而在IE 8上則正常顯示，但卻因為是float，所以後面的項目符號蓋到前一項目了。修改為程式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-type在IE7時，只要li是float，就會被完全忽略。

7、div + height with ul and image

當DIV設定了固定大小，而內容超出所定大小，然後後方跟著IMG時，在IE 7及IE 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 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>

很明顯的，IE 7會尊重DIV所制定的大小來安排後面的IMG位置，所以在圖14上看不出有何問題，但是在IE 8裡，當內容超出制定大小時，

IMG位置會順移開，所以就造成了此問題。在實務上，這算是相當常見的相容性錯誤。

解決方案很簡單，將要被蓋住的那個LI移掉就好了，這本來就是錯誤的設計。

8、p的子控制項對齊

有些網頁設計師習慣使用P加上子控制項來描繪單行輸入+按紐的樣式，這些網頁在IE 8上會有或許的差異，如果裡面使用的IMG太多，

差異就會大到很難忽視。

<!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>

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

<!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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
ie7 download update ie7 ie7 user agent ie8 detection ie8 test update ie8 reinstall ie8
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More