8个不兼容IE 8的CSS样式写法
Internet 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>
(IE7)
(IE8)
不过由于是整个偏移，对网页的影响相当小。
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 7)
(IE 
很明显的，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)
(IE8)
由比较图可看出，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)
(IE
很明显的，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>
(IE 7)
(IE
很难看出来吧，因为偏移很小，不过确实是偏移了。
