浏览器兼容性问题汇总

1、css3   box-shadow 对于不同的浏览器，兼容问题的解决办法:
.box_shadow{ 
 
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布局