网管联盟 | 网管论坛 | 网管u家 | 网管博客 | 网管软件 | 网管求职 | 小游戏 | 网管搜索 | 网管原创 | 网管聚合 | 网管读摘 | 网管焦点 | 世界素材 | 会员投稿 | 会员中心 
中国网管联盟
Windows Linux Cisco 网络技术 数据库 黑客攻防 DotNet Java PHP 认证 新闻资讯 服务器 存储资讯 网络设备 网管学堂 技术专题 焦点 网吧频道
 当前位置: > bitsCN.com > 网管学堂 > 工具软件 > firefox > 总结:CSS在IE与Firefox下的兼容性  

总结:CSS在IE与Firefox下的兼容性

2007-09-17  作者:bitsCN整理  来源:中国网管联盟  我要投稿 点评

总结 IE div important 设置 可以 问题 #div 一定 10px

1.DOCTYPE 影响 CSS 处理

  2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 中国网管联盟bitsCN.com

  3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 中国网管论坛bbs.bitsCN.com

  4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

网管u家u.bitscn@com

  5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式,值得注意的是,一定要将xxxx !important 这句放置在另一句之上 网管u家u.bitsCN.com

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

中国网管联盟bitsCN.com

  7.cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以 中国网管联盟bitsCN.com

  8.FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。

网管u家u.bitsCN.com

  9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:div{margin:30px!important;margin:28px;} 中国网管联盟bitsCN.com

  注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:div{maring:30px;margin:28px}

网管论坛bbs_bitsCN_com

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

  10.IE5 和IE6的BOX解释不一致 网管联盟bitsCN@com

  IE5下div{width:300px;margin:0 10px 0 10px;}

网管bitscn_com

  div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

网管下载dl.bitscn.com

  关于这个/**/是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!:) 中国网管联盟bitsCN.com

  11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}

网管联盟bitsCN_com

  就能解决大部分问题

网管bitscn_com

  注意事项:

网管bitscn_com

  1、float的div一定要闭合。

网管u家u.bitsCN.com

  例如:(其中floatA、floatB的属性已经设置为float:left;)<#div id=\"floatA\" >

网管联盟bitsCN_com

  <#div id=\"floatB\" > 网管u家u.bitscn@com

  <#div id=\"NOTfloatC\" > 网管u家u.bitsCN.com

  这里的NOTfloatC并不希望继续平移,而是希望往下排。

中国网管联盟bitsCN.com

  这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。 网管联盟bitsCN_com

  在<#div class=\"floatB\"> 中国网管论坛bbs.bitsCN.com

  <#div class=\"NOTfloatC\"> 网管下载dl.bitscn.com

  之间加上<#div class=\"clear\">

网管bitscn_com

  这个div一定要注意声明位置,一定要放在最恰当的地方,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。 网管u家u.bitsCN.com

  并且将clear这种样式定义为为如下即可:.clear{

网管联盟bitsCN_com

  clear:both;} 网管联盟bitsCN_com

  此外,为了让高度能自动适应,要在wrapper里面加上overflow:hidden; 网管论坛bbs_bitsCN_com

  当包含float的box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。

网管联盟bitsCN@com

  例如某一个wrapper如下定义:.colwrapper{

网管bitscn_com

  overflow:hidden; 中国网管论坛bbs.bitsCN.com

  zoom:1; 网管联盟bitsCN_com

  margin:5px auto;} 网管u家u.bitsCN.com



收藏本文】【推荐好友】【欢迎投稿】【打印本文】【网管论坛
上一篇:如何使用火狐插件下载Youtube视频   下一篇:截图: Firefox 3.0 Places功能预览
总结:CSS在IE与Firefox下的兼容性 评论:
    评论加载中…
  
  声明:刊登此文章是为了传递更多信息,文章内容仅供学习参考,转载请注明作者与出处。
 
本类热门排行:
1.巧用插件 让Firefox也用上Web迅雷
2.原创:Firefox教程!
3.如何使用火狐插件下载Youtube视频
4.Firefox实用应用技巧六则
5.五个你不能不装的Firefox插件
6.Firefox高级应用技巧大放送
7.FireFox使用的几个好用的绝招
8.巧设参数 改善Firefox的内存占用
9.Firefox配置文件技巧
10.为Firefox开辟下载快车道
最新推荐文章:
1.Firefox 3.0 Beta4中文版放出下载
2.使Firefox速度提升4倍的密技
3.解决Firefox无节制内存占用的问题
4.30余个适用于Firefox的书签与搜索工具
5.Firefox简体中文版下载-历史上最强的浏览
6.Firefox高级应用技巧大放送
7.Firefox配置文件技巧
8.Firefox浏览器配置文件技巧
9.用Firefox来上传下载Gmail中的文件
10.让Firefox搜索更上一层楼
本类最新文章:
1.Firefox 3.0 Beta4中文版放出下载
2.Firefox将在网络搜索上有重大进展
3.Firefox重大安全漏洞 可导致密码失窃
4.Firefox火狐浏览器3.0测试版第2版发布
5.Firefox 3.0新版修正上千处bug
6.FireFox爆脚本漏洞 Google帐户可被窃取
7.Firefox 3.0推迟到2008?
8.来,轻松一下 无处不在的Firefox
9.Firefox 3.0新版增加封锁恶意软件功能
10.Firefox简体中文版下载-历史上最强的浏览
网管论坛交流:
·【4月23日】【影视合集】【20部】【已测
·漂亮女生同居实录----(漫画版)
·我一家人相片,08清明节回家时拍的
·罩杯图解
·【电影合集12部】【DVD】【迅雷】
·[4月12日][DVD][迅雷】【电影合集】【11
·[4月12日][DVD][迅雷】【电影合集】【16
·打油诗(作者——本坛会员)
·《网管精华宝典第四期》继续上线
·翻到这一页。。。