css样式浏览器兼容问题总结

        浏览器兼容问题往往是前端开发人员最为头疼的问题，问题的原因是不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。那么市面上的浏览器那么多，比如说：ie6、7、8、8以上、firefox、chrome、safari、opera等，所以兼容性问题也是很多的。这里只是做一些我常遇到的问题的总结，大家可以互相交流，互相学习。我主要用DIV＋CSS布局，希望对大家有帮助。

1.chrome下默认会将小于12px的文本强制按照12px来解析。解决办法是给其添加属性：-webkit-text-size-adjust: none;

2.CSS控制透明度一般就直接 opacity: 0.6 ;取值范围0-1。但是 IE就需要写成 filter: alpha(opacity=60)；取值范围0-100；但在IE6下又需要写成 filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);

3.div标签套一个img标签下方会出现一条间隙的问题，如下：

样式

效果（下面有1像素的小缝隙）

通常出现在firefox、ie、chrome下，一般给img添加vertical-align或给div添加line-height：0即可。

4. !important 方法现在只是不兼容IE6

5. 除了ie浏览器以外的其他浏览器，给div设置padding后宽度和高度会增加, 因为ie浏览器的盒模型是怪异盒模型。

解决办法：给DIV设定多个宽度，在ie的宽度前加上ie特有标记" * "号，或在除ie浏览器下加box-sizing：border-box；怪异盒模型，padding就不会撑开盒子大小。

6.页面居中问题：.div1 {text-align: center;} FireFox会失效。

解决办法：加上"margin-right: auto; margin-left: auto; "

7.浮动元素ie6下会产生双倍距离

这种情况之下IE6会产生200px的距离

解决办法：加上display:inline;忽略浮动。

8.position:fixed;在ie下不兼容，所以需要用js去判断是否为ie浏览器，如果是ie浏览器，需要用js去固定元素的位置，解决代码如下：

判断ie，在ie下用js固定位置

暂时总结这几点，以后有时间或者再遇到兼容问题还会继续更新。新手总结，大神轻虐！谢谢阅读！