初学前端，正在做一个项目，发现浏览器兼容问题，然后上网搜了一下，网上有很多整理的解决方法，为了以后自己看着方便，现在自己也整理一下。
1 css的hack知识
/* CSS属性级Hack */ color:red; /* 所有浏览器可识别*/ _color:red; /* 仅IE6 识别 */ *color:red; /* IE6、IE7 识别 */ +color:red; /* IE6、IE7 识别 */ *+color:red; /* IE6、IE7 识别 */ [color:red; /* IE6、IE7 识别 */ color:red\9; /* IE6、IE7、IE8、IE9 识别 */ color:red\0; /* IE8、IE9 识别*/ color:red\9\0; /* 仅IE9识别 */ color:red \0; /* 仅IE9识别 */ color:red!important; /* IE6 不识别!important 有危险*/ /* CSS选择符级Hack */ *html #demo { color:red;} /* 仅IE6 识别 */ *+html #demo { color:red;} /* 仅IE7 识别 */ body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */ head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */ :root #demo { color:red\9; } : /* 仅IE9识别 */ /* IE条件注释Hack */ <!--[if IE 6]>此处内容只有IE6.0可见<![endif]--> <!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->
2 ul和ol列表缩进
ul ol { list-style:none; margin:0px; padding:0px; }
注：在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才 能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。
3 css透明
.transparent { filter:alpha(opacity=50); /*IE*/ -moz-opacity:0.5; /*老版本的Mozilla浏览器*/ -khtml-opacity: 0.5; /*老版本的sAFARI浏览器*/ opacity: 0.5; /*CSS标准*/ }
4 css圆角
.borderRadius { border-radius:4px;/*css标准*/ -moz-border-radius:4px;/* Mozilla浏览器的私有属性 */ -webkit-border-radius: 5px; /* Webkit浏览器的私有属性 */ }
低版本的ie是不支持圆角的，也可以通过jquery来设置圆角
5 css双线凹凸边框
.border { border:2px outset;/*IE*/ -moz-border-top-colors: #d4d0c8 white; -moz-border-left-colors: #d4d0c8 white; -moz-border-right-colors:#404040 #808080; -moz-border-bottom-colors:#404040 #808080; }
6 css阴影
.shadow { -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=‘#000000‘)"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=‘#000000‘); }
浏览器bug
1 ie双边距
设置为float的div在ie下设置的margin会加倍。这是ie6的bug
解决方案：在这个div里面加上display:inline;
.Float{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/ }
原文：http://www.cnblogs.com/xmlovejaejoong/p/3912289.html