首页 > web前端 > css教程 > 正文

css中各个浏览器兼容的解决办法

伊谢尔伦
发布: 2016-11-22 11:25:37
原创
1442人浏览过

1. css中几种浏览器对不同关键字的支持,可进行浏览器兼容性重复定义 
!important 可被firefox和ie7识别 
* 可被ie6、ie7识别 
_ 可被ie6识别 
*+ 可被ie7识别
区别ie6与ff: 
background:orange;*background:blue; 
区别ie6与ie7: 
background:green !important;background:blue; 
区别ie7与ff: 
background:orange; *background:green; 
区别ff,ie7,ie6: 
background:orange;*background:green !important;*background:blue; 
ie7,ie8兼容: 


2. ie专用的条件注释 
 
 
 
 
 
 
 


3. 几个浏览器对实际像素的解释 
ie/opera:对象的实际宽度 = (margin-left) + width + (margin-right) 
firefox/mozilla:对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)

4. 鼠标手势问题:firefox的cursor属性不支持hand,但是支持pointer,ie两个都支持;所以为了兼容都用pointer

5. firefox中设置html标签的style属性时,所有位置、宽高和尺寸值必须后跟px,ie也支持此写法,因此统一加px单位。如 obj.style.height = imgobj.style.height + ‘px';

6. firefox无法解析简写的padding属性设置,如padding 5px 4px 3px 1px;必须改为 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px0;

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

8. css控制透明:ie:filter:progid:dximagetransform.microsoft.alpha(style=0,opacity=60); firefox:opacity:0.6;

9. css控制圆角:ie:不支持圆角;

firefox: -moz-border-radius:4px;或 
-moz-border-radius-topleft:4px; 
-moz-border-radius-topright:4px; 
-moz-border-radius-bottomleft:4px; 
-moz-border-radius- bottomright:4px;

10. css双线凹凸边框:ie:border:2px outset;

firefox: 
-moz-border-top-colors: #d4d0c8 white; 
-moz-border-left-colors: #d4d0c8 white; 
-moz-border-right-colors:#404040 #808080; 
-moz-border-bottom-colors:#404040 #808080;

11. ie支持css方法cursor:url()自定义光标样式文件和滚动条颜色风格;firefox对以上两者均不支持

12. ie有select控件永远处于最上层的bug,且所有css对select控件都不起作用

13. ie支持form中的label标签,包括图片和文字内容;firefox不支持包含图片的label,点击图片不能让标记 label for 的radio或checkbox产生效果

14. firefox中的textarea不支持onscroll事件

15. firefox不支持display的inline和block

16. firefox对div设置margin-left, margin-right为auto时已经居中, ie中不行

17. firefox对body设置text-align时, div需要设置margin: auto(主要是margin-left margin-right) 方可居中

18. 对超链接的css样式设置最好遵从这样的顺序:l-v-h-a。即 
 
这样可以避免一些访问过后的超链接就不具备hover和active样式了

19. ie中设置长段落自动换行在css中设置word-wrap:break-word;firefox中使用js插入 的方法来实现,具体代码如下: 


20. 在子容器加了浮动属性后,该容器将不能自动撑开 
解决方法:在标签结束后下一个标签中加上一个清除浮动的css clear:both;

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
相关标签:
css
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

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