0

0

div+CSS 兼容小摘_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 12:32:36

|

859人浏览过

|

来源于php中文网

原创

区别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兼容:

head
1. css中几种浏览器对不同关键字的支持,可进行浏览器兼容性重复定义
!important 可被firefox和ie7识别
* 可被ie6、ie7识别
_ 可被ie6识别
*+ 可被ie7识别
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;
21. 浮动后ie6解释外边距为实际边距的双倍
解决办法:加上display:inline
22. ie6下图片下方会有空隙
解决办法:为img加上display:block或设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom
23. ie6下两个层中间有空隙
解决办法:设置右侧div也同样浮动float:left或者相对ie6定义 margin-right:-3px;
24. li中内容超过长度后以省略号的显示方法

25. 将元素的高度和行高设为相同值,即可垂直居中文本

26. 对齐文本与文本输入框,须在css中增加vertical-align:middle;属性设置

27. 支持web标准的浏览器设置了固定高度值就不会像ie6那样被撑开,但是又想设置固定高度又想能够被撑开呢?解决办法是去掉height属性而设置min-height,为了兼容不支持min-height的ie6可以这样定义:
{
height:auto!important;
height:200px;
min-height:200px;
}
28. web标准中ie无法设置滚动条颜色
解决办法:在css中对body的设置改为对html的

29. ie6由于默认行高问题无法定义1px左右高度的容器,
解决办法:在css中对容器设置如:overflow:hidden | zoom:0.08 | line-height:1px
30. 给flash设置透明属性可使层显示在flash之上

Toolplay
Toolplay

一站式AI应用聚合生成平台

下载

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Golang 网络安全与加密实战
Golang 网络安全与加密实战

本专题系统讲解 Golang 在网络安全与加密技术中的应用,包括对称加密与非对称加密(AES、RSA)、哈希与数字签名、JWT身份认证、SSL/TLS 安全通信、常见网络攻击防范(如SQL注入、XSS、CSRF)及其防护措施。通过实战案例,帮助学习者掌握 如何使用 Go 语言保障网络通信的安全性,保护用户数据与隐私。

2

2026.01.29

俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

437

2026.01.28

包子漫画在线官方入口大全
包子漫画在线官方入口大全

本合集汇总了包子漫画2026最新官方在线观看入口,涵盖备用域名、正版无广告链接及多端适配地址,助你畅享12700+高清漫画资源。阅读专题下面的文章了解更多详细内容。

143

2026.01.28

ao3中文版官网地址大全
ao3中文版官网地址大全

AO3最新中文版官网入口合集,汇总2026年主站及国内优化镜像链接,支持简体中文界面、无广告阅读与多设备同步。阅读专题下面的文章了解更多详细内容。

255

2026.01.28

php怎么写接口教程
php怎么写接口教程

本合集涵盖PHP接口开发基础、RESTful API设计、数据交互与安全处理等实用教程,助你快速掌握PHP接口编写技巧。阅读专题下面的文章了解更多详细内容。

8

2026.01.28

php中文乱码如何解决
php中文乱码如何解决

本文整理了php中文乱码如何解决及解决方法,阅读节专题下面的文章了解更多详细内容。

13

2026.01.28

Java 消息队列与异步架构实战
Java 消息队列与异步架构实战

本专题系统讲解 Java 在消息队列与异步系统架构中的核心应用,涵盖消息队列基本原理、Kafka 与 RabbitMQ 的使用场景对比、生产者与消费者模型、消息可靠性与顺序性保障、重复消费与幂等处理,以及在高并发系统中的异步解耦设计。通过实战案例,帮助学习者掌握 使用 Java 构建高吞吐、高可靠异步消息系统的完整思路。

10

2026.01.28

Python 自然语言处理(NLP)基础与实战
Python 自然语言处理(NLP)基础与实战

本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

24

2026.01.27

拼多多赚钱的5种方法 拼多多赚钱的5种方法
拼多多赚钱的5种方法 拼多多赚钱的5种方法

在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变,以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销,利用平台社交电商红利实现盈利。

124

2026.01.26

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
独孤九贱(6)_jQuery视频教程
独孤九贱(6)_jQuery视频教程

共44课时 | 34.7万人学习

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

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