0

0

使用CSS多浏览器兼容性问题及解决方法介绍

高洛峰

高洛峰

发布时间:2017-03-14 16:16:25

|

1642人浏览过

|

来源于php中文网

原创

兼容性处理要点 
1、doctype 影响 css 处理 

2、ff: 设置 padding 后, div 会增加 heightwidth, 但 ie 不会, 故需要用 !important 多设一个 height 和 width 

3、ff: 支持 !important, ie 则忽略, 可用 !important 为 ff 特别设置样式 

4、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个div一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行 

5、在mozilla firefox和ie中的box模型解释不一致导致相差2px解决方法: 

div{margin:30px!important;margin:28px;} 

注意这两个margin的顺序一定不能写反,!important这个属性ie不能识别,但别的浏览器可以识别。所以在ie下其实解释成这样: 

div{maring:30px;margin:28px} 

重复定义的话按照最后一个来执行,所以不可以只写margin:xxpx!important; 

浏览器差异 
1、ul和ol列表缩进问题 

消除ul、ol等列表的缩进时,样式应写成:list-style:none;margin:0px;padding:0px; 
其中margin属性对ie有效,padding属性对firefox有效。 

[注]经验证,在ie中,设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点,设置padding对样式没有影响;在 firefox 中,设置margin:0px仅仅可以去除上下的空白,设置padding:0px后仅仅可以去掉左右缩进,还必须设置list- style:none才 能去除列表编号或圆点。也就是说,在ie中仅仅设置margin:0px即可达到最终效果,而在firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。 

2、css透明问题 

ie:filter:progid:dximagetransform.microsoft.alpha(style=0,opacity=60)。 
ff:opacity:0.6。 
[注] 最好两个都写,并将opacity属性放在下面。 

3、css圆角问题 

ie:ie7以下版本不支持圆角。 
ff: -moz-border-radius:4px,或者-moz-border-radius-topleft:4px;-moz- border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz- border- radius- bottomright:4px;。 
[注] 圆角问题是css中的经典问题,建议使用jquery框架集来设置圆角,让这些复杂的问题留给别人去想吧。不过jquery的圆角只看到支持整个区域的圆角,没有支持边框的圆角,不过这个边框的圆角可以通过一些简单的手段来实现,下次有机会介绍下。 

4、cursor:hand vs cursor:pointer 

问题说明:firefox不支持hand,但ie支持pointer ,两者都是手形指示。 
解决方法:统一使用pointer。 

5、字体大小定义不同 

对字体大小small的定义不同,firefox中为13px,而ie中为16px,差别挺大。 

解决方法:使用指定的字体大小如14px。 

并列排列的多个元素(图片或者链接)的div和div之间,代码中的空格和回车在firefox中都会被忽略,而ie中却默认显示为空格(约3px)。 

6、css双线凹凸边框 
ie:border:2px outset;。 
ff: -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080; 

浏览器bug 
1、ie的双边距bug 

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 

解决方案:在这个div里面加上display:inline; 

例如: 

 

相应的css为 

以下为引用的内容: 

#IamFloat{ 
float:left; 
margin:5px;/*IE下理解为10px*/ 
display:inline;/*IE下再理解为5px*/ 
} 
#IamFloat{ 
float:left; 
margin:5px;/*IE下理解为10px*/ 
display:inline;/*IE下再理解为5px*/ 
}

关于CSS中的问题实在太多了,甚至同样的CSS定义在不同的页面标准中的显示效果都是不一样的。一个合乎发展的建议是,页面采用标准XHTML标准编写,较少使用table,CSS定义尽量依照标准DOM,同时兼顾IE、Firefox、Opera等主流浏览器。很多情况下,FF和 Opera的CSS解释标准更贴近CSS标准,也更具有规范性。 

2、IE选择符空格BUG 
今天在给博客的段落样式设置首字符样式的时候发现,原来一个空格也可以使样式失效。 

请看以下代码: 

 
 
 
 
 
 

PHP经典实例(第二版)
PHP经典实例(第二版)

PHP经典实例(第2版)能够为您节省宝贵的Web开发时间。有了这些针对真实问题的解决方案放在手边,大多数编程难题都会迎刃而解。《PHP经典实例(第2版)》将PHP的特性与经典实例丛书的独特形式组合到一起,足以帮您成功地构建跨浏览器的Web应用程序。在这个修订版中,您可以更加方便地找到各种编程问题的解决方案,《PHP经典实例(第2版)》中内容涵盖了:表单处理;Session管理;数据库交互;使用We

下载

对于世界而言,你是一个人;但是对于某个人,你是他的整个世界。纵然伤心,也不要愁眉不展,因为你不知是谁会爱上你的笑容。

 

相关专题

更多
c++ 根号
c++ 根号

本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

17

2026.01.23

c++空格相关教程合集
c++空格相关教程合集

本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

22

2026.01.23

yy漫画官方登录入口地址合集
yy漫画官方登录入口地址合集

本专题整合了yy漫画入口相关合集,阅读专题下面的文章了解更多详细内容。

91

2026.01.23

漫蛙最新入口地址汇总2026
漫蛙最新入口地址汇总2026

本专题整合了漫蛙最新入口地址大全,阅读专题下面的文章了解更多详细内容。

124

2026.01.23

C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

14

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

65

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

59

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

61

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

33

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Kotlin 教程
Kotlin 教程

共23课时 | 2.8万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.0万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号