IE7和IE8的CSS样式不兼容
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>
