IE7和IE8的CSS样式八大差异-jquery ie8

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

#p#3、负数margin

许多网页设计师常常以负数的margin来定位HTML元素的位置，目的是让该元素与图形对齐，IE7及IE8对于负数的解释有蛮大的差异性。
程式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遭遇负数时，并不会移出DIV的范围，而IE8会，在笔者撰写本文之时，大多数的不相容IE8网页错误都源自于此。

4、TableWithBorderStyle

元素的Layout在每个浏览器上都会有些许差异的表现，下面的代码是一个在IE7及IE8上呈现相异的范例。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宽度计算比IE8高，不过由于这是整体偏移，加上我们很少会设定太大的border宽度，影响程度几乎等于0。#p#

5、bottom、top

当使用绝对位置时，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"> 
<divstyledivstyle="background-color:Red;bottom:5px;top:5px;position:absolute;height:40px"> 
TEST  
div> 
div> 
body> 
html>

很难看出来吧，因为偏移很小，不过确实是偏移了。

6、li+float

UL、LI加上float，在IE7于IE8有相当大的差异，见：


 
"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的项目符号被取消了，而在IE8上则正常显示，但却因为是float，所以后面的项目符号盖到前一项目了。修改为程式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相异点时，许多网站都有这类问题，因为我们常用这种手法来处理页签类的显示。
PS:list-style-type在IE7时，只要li是float，就会被完全忽略。#p#

7、div+heightwithulandimage

当DIV设定了固定大小，而内容超出所定大小，然后后方跟着IMG时，在IE7及IE8会有相当大的差异。


 
"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里，当内容超出制定大小时，
IMG位置会顺移开，所以就造成了此问题。在实务上，这算是相当常见的相容性错误。
解决方法很简单，将要被盖住的那个LI移掉就好了，这本来就是错误的设计。

8、p的子控件对齐

有些网页设计师习惯使用P加上子控件来描绘单行输入+按纽的样式，这些网页在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，但IE8不会。这类问题很难解决，需要透过CSS判断IE版本来提供不同的CSS，让两者趋近相同。


 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>title> 
 CSS兼容：如何兼容IE7和IE8  
 CSS兼容问题已经是CSS网页布局技术中的重要组成部分，随着IE8的越来越广泛的安装应用，对IE7和IE8的兼容问题，也颇受关注,这里向大家描述一下CSS的使用中如何兼容IE7和IE8。
 2010-09-08 16:59:48
 CSS兼容IE7IE8