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固定位置


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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容