IE7和IE8的CSS样式八大差异

开发 前端
本文向大家描述一下IE7和IE8的CSS样式八大差异,Microsoft官方并未提供关于IE7及IE8的CSS差异说明文件,只是说IE8目前更趋近于CSS2.1而非CSS2.0,这里规类出8个最常见的差异供读者们参考。

你对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上启始的位置就有差异。
 

  1.  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <title>title> 
  6. head> 
  7. <body> 
  8. <divstyledivstyle="height:100px;width:200px;border:solid1pxblack"> 
  9. <div> 
  10. <ahrefahref="http://www.hinet.net">Hineta> 
  11. div> 
  12. div> 
  13. body> 
  14. html> 
  15.  

不过由于是整个偏移,对网页的影响相当小。

2、DIV中的P

下面的执行结果呈现了IE7及IE8在处理DIV中的P之差异性。
 

  1.  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <title>title> 
  6. head> 
  7. <body> 
  8. <divstyledivstyle="height:100px;width:200px;border:solid1pxblack"> 
  9. <div> 
  10. <p>TESTFontp> 
  11. div> 
  12. div> 
  13. body> 
  14. html> 
  15.  

很明显的,IE8中对于DIV中的P预设位置与IE7不同,IE7是将margin-top预设为0px,排在最上方,,IE8却未预设margin-top,
解决方法是将margin-top加上。
 

  1.  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <title>title> 
  6. head> 
  7. <body> 
  8. <divstyledivstyle="height:100px;width:200px;border:solid1pxblack"> 
  9. <div> 
  10. <pstylepstyle="margin-top:0px">TESTFontp> 
  11. div> 
  12. div> 
  13. body> 
  14. html> 
  15. (IE8Withmargin-top)  
  16.  

 #p#3、负数margin

许多网页设计师常常以负数的margin来定位HTML元素的位置,目的是让该元素与图形对齐,IE7及IE8对于负数的解释有蛮大的差异性。
程式4
 

  1.  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <title>title> 
  6. head> 
  7. <body> 
  8. <divstyledivstyle="height:100px;width:200px;border:solid1pxblack"> 
  9. <divstyledivstyle="background-color:Red;margin:-5px6px7px8px"> 
  10. <ahrefahref="http://www.hinet.net">Hineta> 
  11. div> 
  12. div> 
  13. body> 
  14. html> 
  15.  

由比较图可看出,IE7遭遇负数时,并不会移出DIV的范围,而IE8会,在笔者撰写本文之时,大多数的不相容IE8网页错误都源自于此。

4、TableWithBorderStyle

元素的Layout在每个浏览器上都会有些许差异的表现,下面的代码是一个在IE7及IE8上呈现相异的范例。Table
 

  1.  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <title>title> 
  6. head> 
  7. <body> 
  8. <tablestyletablestyle="border:double7pxgreen"> 
  9. <tr> 
  10. <tdstyletdstyle="border:double1pxgreen">atd> 
  11. <tdstyletdstyle="border:double1pxgreen">atd> 
  12. <tdstyletdstyle="border:double1pxgreen">atd> 
  13. tr> 
  14. <tr> 
  15. <tdstyletdstyle="border:double1pxgreen">atd> 
  16. <tdstyletdstyle="border:double1pxgreen">atd> 
  17. <tdstyletdstyle="border:double1pxgreen">atd> 
  18. tr> 
  19. <tr> 
  20. <tdstyletdstyle="border:double1pxgreen">atd> 
  21. <tdstyletdstyle="border:double1pxgreen">atd> 
  22. <tdstyletdstyle="border:double1pxgreen">atd> 
  23. tr> 
  24. table> 
  25. body> 
  26. html> 
  27.  

很明显的,IE7的border宽度计算比IE8高,不过由于这是整体偏移,加上我们很少会设定太大的border宽度,影响程度几乎等于0。#p#

5、bottom、top

当使用绝对位置时,IE7与IE8会产生些许的偏移,这些偏移是整体性的,所以影响很小
例子:
 

  1.  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <title>title> 
  6. head> 
  7. <body> 
  8. <divstyledivstyle="height:100px;width:200px;border:solid1pxblack"> 
  9. <divstyledivstyle="background-color:Red;bottom:5px;top:5px;position:absolute;height:40px"> 
  10. TEST  
  11. div> 
  12. div> 
  13. body> 
  14. html> 
  15.  

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

6、li+float

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

  1.  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <title>title> 
  6. head> 
  7. <body> 
  8. <div> 
  9. <div> 
  10. <ul> 
  11. <listylelistyle="cursor:hand;float:left;"> 
  12. TEST1li> 
  13. <listylelistyle="cursor:hand;float:left;"> 
  14. TEST2li> 
  15. <listylelistyle="cursor:hand;float:left;"> 
  16. TEST3li> 
  17. <listylelistyle="cursor:hand;float:left;"> 
  18. TEST4li> 
  19. <listylelistyle="cursor:hand;float:left;"> 
  20. TEST5li> 
  21. ul> 
  22. div> 
  23. div> 
  24. body> 
  25. html> 
  26.  

在IE7上,LI的项目符号被取消了,而在IE8上则正常显示,但却因为是float,所以后面的项目符号盖到前一项目了。修改为程式8的模样后
,两者就趋近相同了。

  1.  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <title>title> 
  6. head> 
  7. <body> 
  8. <div> 
  9. <div> 
  10. <ulstyleulstyle="list-style-type:none"> 
  11. <listylelistyle="cursor:hand;float:left;"> 
  12. TEST1li> 
  13. <listylelistyle="cursor:hand;float:left;"> 
  14. TEST2li> 
  15. <listylelistyle="cursor:hand;float:left;"> 
  16. TEST3li> 
  17. <listylelistyle="cursor:hand;float:left;"> 
  18. TEST4li> 
  19. <listylelistyle="cursor:hand;float:left;"> 
  20. TEST5li> 
  21. ul> 
  22. div> 
  23. div> 
  24. body> 
  25. html> 
  26.  

在尝试寻找CSS相异点时,许多网站都有这类问题,因为我们常用这种手法来处理页签类的显示。
PS:list-style-type在IE7时,只要li是float,就会被完全忽略。#p#

7、div+heightwithulandimage

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

  1.  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <title>title> 
  6. head> 
  7. <body> 
  8. <div> 
  9. <divstyledivstyle="width:300px;height:22px;margin-top:5px"> 
  10. <ulstyleulstyle="list-style-type:none"> 
  11. <listylelistyle="cursor:hand;float:left;"> 
  12. TEST1li> 
  13. <listylelistyle="cursor:hand;float:left;"> 
  14. TEST2li> 
  15. <listylelistyle="cursor:hand;float:left;"> 
  16. TEST3li> 
  17. <listylelistyle="cursor:hand;float:left;"> 
  18. TEST4li> 
  19. <listylelistyle="cursor:hand;float:left;"> 
  20. TEST5li> 
  21. <listylelistyle="cursor:hand;float:left;"> 
  22. TEST6li> 
  23. ul> 
  24. div> 
  25. <ahrefahref="http://www.hinet.net>"> 
  26. <imgsrcimgsrc="21565.jpg"width="300px"height="200px"/> 
  27. a> 
  28. div> 
  29. body> 
  30. html> 
  31.  

很明显的,IE7会尊重DIV所制定的大小来安排后面的IMG位置,所以在图14上看不出有何问题,但是在IE8里,当内容超出制定大小时,
IMG位置会顺移开,所以就造成了此问题。在实务上,这算是相当常见的相容性错误。
解决方法很简单,将要被盖住的那个LI移掉就好了,这本来就是错误的设计。

8、p的子控件对齐

有些网页设计师习惯使用P加上子控件来描绘单行输入+按纽的样式,这些网页在IE8上会有或许的差异,如果里面使用的IMG太多,
差异就会大到很难忽视。
 

  1.  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <title>title> 
  6. head> 
  7. <body> 
  8. <p> 
  9. <inputtypeinputtype="text"/> 
  10. <imgsrcimgsrc="add2.png"height="16px"width="16px"/> 
  11. p> 
  12. body> 
  13. html> 
  14.  

很明显,IE7会对IMG置中于P,但IE8不会。这类问题很难解决,需要透过CSS判断IE版本来提供不同的CSS,让两者趋近相同。
 

  1.  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <title>title> 
  6. 2010-09-08 16:59:48

    CSS兼容IE7IE8

2010-08-18 10:37:16

IE6IE7IE8

2010-09-15 11:08:48

CSSIE6IE7

2009-08-13 10:12:07

IE的CSS Bug

2010-08-19 09:24:20

CSS兼容IE7IE8

2010-08-18 10:24:51

IE6IE7IE8

2010-09-16 13:17:31

IE6IE7IE8

2010-08-17 15:38:49

CSS兼容IE7IE8

2010-08-18 15:57:14

IE6IE7IE8

2011-06-03 15:41:27

CSS HACK

2010-08-20 13:15:54

IE6IE7IE8

2010-09-15 10:14:19

IE7IE8兼容CSS

2011-03-08 11:14:35

IE7、IE8、IE

2010-08-19 14:33:18

2010-09-16 13:33:47

IE6IE7IE8

2010-08-19 14:19:12

IE6IE7IE8

2010-09-15 10:25:18

IE7IE8CSS兼容性

2010-08-20 13:08:41

IE6IE7IE8

2010-08-17 15:33:28

CSS兼容IE7IE8

2010-08-19 10:56:55

JSIE6IE7
点赞
收藏

51CTO技术栈公众号

业务
速览
在线客服