IE7和IE8的CSS样式不兼容
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>
轉載于:https://www.cnblogs.com/yuankexiong313/archive/2010/05/14/1735470.html
總結
以上是生活随笔為你收集整理的IE7和IE8的CSS样式不兼容的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Fredholm第二类积分方程的MATL
- 下一篇： 帆软报表操作