8个不兼容IE 8的CSS样式写法
作者：Div之家 来源：Divhome（转载请注明）
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)
(IE 
在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)
(IE
很明显的，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)
(IE
很明显，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>
