浏览器品种层出不穷啊，都要伺候好。当然，很多国产浏览器，诸如腾讯浏览器，搜狗，世界之窗，360 浏览器等等，这些也没空去研究了，不知道分别使用的什么内核，暂且不管了。IE6-9 倒是之前说过怎么单独去 HACK，这里就不提了，下面是针对 Chrome/Safari、Firefox、Opera 的 CSS HACK，互不影响，只对各自浏览器起作用，测试了一下，没啥问题，可用。记录下来，将来还会用到。注意，下面的代码一定要放到样式表文件的最后，原因吗，你懂的。

/* style fix for chrome & safari  */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.yourclass { }
	#yourid { }
}
/* style fix for firefox  */
@-moz-document url-prefix() {
	.yourclass { }
	#yourid { }
}
/* style fix for opera  */
@media not screen and (1) {} /* 这一行不要删除，否则下面的不起作用。  */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
	.yourclass { }
	#yourid { }
}
/* 测试浏览器版本：chrome 20.0.1132.57 、firefox 12.0、opera 11.62 可用，其他版本未测试  */

　　以前就唠叨过，不过是浅尝辄止，没有系统的研究过，因为太杂了，受不了，基本上是碰到什么问题就临时解决什么问题，也没有过多的总结。上两周因为在给某局折腾网站，再次被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的啊，所以实际使用中你得自己解决实际需求。