浏览器兼容性问题汇总

一、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*/
}

二、各个浏览器之间显示字体不一致的解决办法
统一设置全局字体：
body{font-family: '微软雅黑';}

三、去掉谷歌浏览器输入框内自带黄色背景
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}

四、去掉IE浏览器中输入框右边的小图标（叉号和眼睛）
 ::-ms-clear, ::-ms-reveal{display: none;}

五、去掉谷歌浏览器下输入框自带边框
 .class{outline:none}  
六、禁止表单的自动填充功能

autocomplete=”off”。
七、取消chrome下textarea可拖动放大
textarea{resize:none}

八、标签最低高度 min-height不兼容

由于min-height自己就是一个不兼容的css属性，因此正确的作法是：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

九、 /* 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。由于优先级相同且想冲突的属性设置后一个会覆盖掉前一个，因此书写的次序是很重要的

十、不一样浏览器默认的内边距和外边距不一样

*{margin:0;padding:0;}

十一、div用float布局后而且设置了margin属性的状况下，在ie6下margin比设置的要大

在float样式中加入display:inline;将其转化为行内元素

十二、当给标签设置高度小于10px时，IE6，IE7，遨游高度会超出设置高度

给标签设置overflow:hidden;或者把line-height设置成小于原本要设置的高度（这个问题的缘由是IE8以前的浏览器都会给一个默认的行高）

1三、行内元素设置了display:block;后又用float布局而且设置了margin的状况下，ie6间距bug问题

在display:block;后加display:inline;display:table;

1四、多个<img>放在同一行时，有些浏览器会出现图片之间有间隙的状况，加了通配符设置也不起做用

使用float为img布局

*{margin:0;padding:0;}

标签最低高度设置min-height不兼容标签最低高度设置min-height不兼容标签最低高度设置min-height不兼容