1、css3 box-shadow 对于不同的浏览器，兼容问题的解决办法:
.box_shadow{ background-color: #eee; filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);/*for ie6,7,8*/ -moz-box-shadow:2px 2px 5px #969696;/*firefox*/ -webkit-box-shadow:2px 2px 5px #969696;/*webkit*/ box-shadow:2px 2px 5px #969696;/*opera或ie9*/ }
2、各个浏览器之间显示字体不一致的解决办法
统一设置全局字体：
body{font-family: '微软雅黑';}
3、去掉谷歌浏览器输入框内自带黄色背景
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}
4、去掉IE浏览器中输入框右边的小图标（叉号和眼睛）
::-ms-clear, ::-ms-reveal{display: none;}
5、去掉谷歌浏览器下输入框自带边框
.class{outline:none}
6、禁止表单的自动填充功能
autocomplete=”off”。
7、取消chrome下textarea可拖动放大
textarea{resize:none}
8、标签最低高度 min-height不兼容
因为min-height本身就是一个不兼容的css属性，所以正确的做法是：
{min-height:200px; height:auto !important; height:200px; overflow:visible;}
9、 /* CSS hack*/
使用hacker我可以把浏览器分为3类：IE6 ；IE7和遨游；其他（IE8 chrome ff safari opera等）
◆IE6认识的hacker 是下划线_ 和星号 *
◆IE7 遨游认识的hacker是星号 *
比如这样一个CSS设置：
height:300px;*height:200px;_height:100px;
IE6浏览器在读到height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt， 所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，IE6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；
IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px，剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的
10、不同浏览器默认的内边距和外边距不同
*{margin:0;padding:0;}
11、div用float布局后并且设置了margin属性的情况下，在ie6下margin比设置的要大
在float样式中加入display:inline;将其转化为行内元素
12、当给标签设置高度小于10px时，IE6，IE7，遨游高度会超出设置高度
给标签设置overflow:hidden;或者把line-height设置成小于本来要设置的高度（这个问题的原因是IE8之前的浏览器都会给一个默认的行高）
13、行内元素设置了display:block;后又用float布局并且设置了margin的情况下，ie6间距bug问题
在display:block;后加display:inline;display:table;
14、多个<img>放在同一行时，有些浏览器会出现图片之间有间隙的情况，加了通配符设置也不起作用
使用float为img布局