以前就唠叨过，不过是浅尝辄止，没有系统的研究过，因为太杂了，受不了，基本上是碰到什么问题就临时解决什么问题，也没有过多的总结。上两周因为在给某局折腾网站，再次被IE系列浏览器折磨的死去活来的，基本算是告一段落，于是就想总结一下，以后可以少走点弯路。放狗搜了一下，其实不只咱天朝有这样的需求，老外也一样，人家也总结了不少经验，咱就借花献佛吧。
先说IE6这个老顽固吧，就它的事情最多，IE7、8、9相对来说好很多。对于IE6来说，Box Model盒子模型里定义的参数IE6解释的都一塌糊涂，比如： div#box {
width: 100px;
border: 2px solid black;
padding: 10px;
} 这个样式定义的box的宽度，对于IE6来说，就是100px，但是对于其他比较流行的浏览器，宽度是124px，这问题就很明显了，有了这个差异，网页的布局会有问题，所以这个的注意。
然后是Double Margin双倍边距的问题，比如： div#box {
width: 100px;
border: 2px solid black;
padding: 10px;
float: right;
margin-right: 20px;
} 这个box元素咱们需要它Float到右边，且右边距是20px，实际上IE6会把边距加倍，成了40px，这又是个把你的布局彻底打乱的一个Bug，解决之道当然是有的，就是再加一个定义，"display:inline;"。问题是可以解决，但是有时你可能并不想要这个元素是inline的啊，所以实际使用中你得自己解决实际需求。
IE6不支持Min-Width和Min-Height，Min-Width可能用的较少，Min-Height相对来说可能多点。不支持那就只能找HACK写法了，有外国友人给出一个兼容的写法，如下： selector {
min-height:500px;/* 这一句IE6不认识 */
height:auto !important;/* 这一句里的!important，IE6不认识 */
height:500px;/* 这一句IE6是认识的 */
} !important这个申明IE6是不认识的，但是它之前的定义是支持的，所以这样式定义的高度是500px，如果样式内的元素高度大于500px之后，就开始auto自适应了。IE7及其他浏览器是支持!important这个申明的，最后那一行定义也就不起作用了。
顺道再说一下这个!important，它是用来提升样式定义优先级别的，当然，IE6不认识这个申明，IE7及以上或者其他流行的浏览器都认得，看下面CSS和HTML： #box div{
color:red;
}
.important_off{
color:blue;
}
.important_on{
color:blue !important;
}
这一行没有用important
这一行用了important
默认情况下，id的优先级是高于class的，所以，页面里第一行文字不会是蓝色的，而是继承id的颜色属性，是红色的。但是第二行，因为class里使用了!important来提升了样式的优先级，或者说是强制重定义了样式，这个申明是高于id里定义的样式的，因此第二行的文字是蓝色的。刚才说IE6不认得!important，这里它又认得，你说这是什么事啊，盖茨大叔，给个解释呗。
继续，IE6下，只有a这个链接元素支持hover这个伪类属性，其他浏览器都可以很好的支持其他元素的这个伪类属性，如果你想让IE6也支持，那就只能用jQuery之类的脚本了。
最蛋疼的一点，IE6这丫的不支持透明的PNG格式图片，如果要求不是很高，那就用GIF代替吧，不过毕竟GIF只有256色，PNG透明图片是24位真彩色的。当然，也可以用iepngfix.htc这种Behavior来解决，会稍微影响页面加载速度。具体做法请自行搜索一下吧。
上面罗嗦了一堆，其实各个都是蛋疼的问题。所以在写样式表的时候，需要你适当的收拾一下。下面就是收集的一些关于CSS的hack写法。
1、条件语法判断 <!--[if condition]> HTML <![endif]-->
condition条件写法：
IE 任何版本的IE
lt IE version 低于某版本的IE
lte IE version 低于等于某版本的IE
IE version 仅适用某个版本的IE
gte IE version 高于等于某个版本的IE
gt IE version 高于某个版本的IE
这里的version是具体的IE版本号，比如5，5.5，6，7，8，9。比如： <!--[if lte IE 6]>
<style type="text/css">
.ie6fix {height:8px; font-size:0px; margin:0px; padding:0px;}
</style>
<![endif]-->
这一段要放在head和/head标签之间，如果不是符合条件的浏览器，这一段条件语法判断是无效的，因为代码前是注释开始的。这样可以用来给特定版本的浏览器定义特殊的样式，且这一段要放在你的主样式表之后，因为样式表是按顺序加载的。就是你的head和/head标签之间还有这个<link rel="stylesheet" type="text/css" href="/admin/main.css">样式表引用语句，这个放在前面，上面的条件语法判断放在它下面。
2、样式表文件里直接hack .class {
color : red; /* all browsers, of course */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 and below */
_bac\kground: #f60; /* IE 6 only */
_background/**/: #0f0; /* IE 5.0 */
_background:/**/ #f62; /* IE 5.5 only */
_background/**/:/**/ #f61; /* IE 6 only */
}
/* 符合标准的CSS 推荐使用 */
* html .class {color: #F00;} /* IE 6 only */
*:first-child+html .color {color: #F00;} /* IE 7 only */
*+html .color {color: #F00;} /* IE 7 only (上一行的简写) */
/* 不符合标准的CSS 用于不用随你 */
@media \0screen {
.color {color: #F00;} /* IE 8 only */
}
:root .color {color: #F00\9;} /* IE 9 only */ 样式表里直接hack的话，注意定义样式的顺序就OK，至于是否符合CSS标准，看你的想法了，反正不管白猫黑猫，能抓住耗子的就是好猫。这里只是总结了常见的关于浏览器兼容的问题，其他肯定还有不少，只能是碰到了再说了。另外，很多HTML的元素，比如form，li，input等等，默认都有各自的padding和margin，各个浏览器的默认值都不同，这也是个问题，所以需要你自己注意了。
2012年7月14日补充：
关于Javascript脚本，IE6还真是奇葩中的另类战斗机啊，看下面代码：<script type="text/javascript">
var tabber1 = new Yetii({
id: 'tab-container-1',
active: 1，
interval: 5,
wait: 10, //最后的逗号，IE7+是没问题的，IE6必须去掉，否则提示脚本错误。
});
</script>
2012-07-14 18:58