CSS各个浏览器兼容问题
为了让各浏览器有同样的显示效果，就不能不对CSS做兼容性处理，这时我们就会用到CSS HACK。当然在这篇文章中我们只谈现在使用率最高的IE6、IE7、IE8和FF，至于IE6以下版本已OP、SF在这此先不详细说明。新手看了这片文章一定会有所收获，而高手们路过一下就可以了
1、可进行浏览器兼容性重复定义
首先来看一下示例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一个CSS兼容性问题的示例</title>
<style type="text/css">
.test{
width:500px;
height:200px;
background-color:orange; /*IE6、IE7、IE8和FF支持*/
*background-color:blue; /*IE7支持*/
_background-color:red; /*IE6支持*/
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
在看看效果：
这是在IE6中的效果
这是在IE7中的效果
这是在IE8和FF中的效果
为什么会这样呢？我解释一下，首先background-color:orange;IE6、IE7、IE8和FF都支持，但是由于程序运行时按照顺序执行，后面设置的属性会覆盖前面的属性，后面两个*background-color:blue; 和_background-color:red;可是IE6不支持“*”号只支持“-”号，所以IE6最终读取的_background-color:red;。
同样的道理，IE7能够识别“*”号，但是不能识别“-”号，所以在IE7下运行的效果是*background-color:blue;IE8和FF“*”号和“-”号都不能识别所以最终读取为background-color:orange;
2、几个浏览器对实际像素的解释
IE/Opera：对象的实际宽度 = (margin-left) + width + (margin-right)
Firefox/Mozilla：对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)
3、鼠标手势问题
FireFox的cursor属性不支持hand，但是支持pointer，IE两个都支持；所以为了兼容都用pointer
4、单位的问题
FireFox中设置HTML标签的Style属性时，所有位置、宽高和尺寸值必须后跟px，IE也支持此写法，因此统一加px单位
5、消除ul、ol等列表的缩进
消除ul、ol等列表的缩进时，样式应写成:list-style:none;margin:0px;padding:0px;其中margin属性对IE有效，padding属性对FireFox有效
6、超链接的CSS样式设置
对超链接的CSS样式设置最好遵从这样的顺序：L-V-H-A。即
<style type="text/css">
<!--
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>
这样可以避免一些访问过后的超链接就不具备hover和active样式了
7、浮动后IE6解释外边距为实际边距的双倍
解决办法：加上display:inline
8、自动撑开
支持WEB标准的浏览器设置了固定高度值就不会像IE6那样被撑开，但是又想设置固定高度又想能够被撑开呢?解决办法是去掉height属性而设置min-height，为了兼容不支持min-height的IE6可以这样定义：
{
height:auto!important;
height:200px;
min-height:200px;
}
9、IE6由于默认行高问题无法定义1px左右高度的容器
解决办法：在CSS中对容器设置如：overflow:hidden | zoom:0.08 | line-height:1px