文章分类 | 推荐文章 | 最新文章 | 热点文章 | 最新软件 | 精品软件 | 下载排行 | 推荐下载 | firefox | WPS | 杀毒软件 | Picasa
清风网络
首 页 软件下载 网络学院 数码学院
QQ 电脑入门 游戏 操作系统 图形图像 办公软件 媒体动画 精文荟萃 常用软件 网页编程 技术开发 网络技术 认证考试 网站建设 文章专栏
当前位置:清风网络学院专栏firefoxCSS在IE与Firefox下的兼容性
精品推荐
特别推荐
·下载:Firefox 4.0 Alpha 1 Pre版
·推荐一些实用的Firefox扩展
·帮你解决Firefox无节制内存占用的问题
·不可或缺 20个必备的Firefox插件
·提高做火狐firefox推介效果的技巧代码
·Firefox v2.0.0.9 简体中文版下载
·Javascript在IE和FireFox中的不同表现
·Firefox火狐浏览器常用快捷键大全
·Firefox明年目标:30%市场份额
·101件Firefox能而IE不能做的事
·常用技巧:解决Firefox启动慢的四种方法
·让IE也拥有Firefox的七大最强武器
·Firefox 浏览器实用应用技巧六则
·提高浏览体验的五十个FireFox扩展
·巧用插件 让Firefox也用上Web迅雷
·快速掌握使用Firefox技巧问答
·没有不可能 让Firefox也用上Web迅雷
·innerHTML在Firefox和Opera下的执行特例
·FireFox 如何用Javascript 修改状态栏
·实现IE收藏夹和Firefox书签互换
热点TOP10
·实现IE收藏夹和Firefox书签互换
·下载:Firefox 4.0 Alpha 1 Pre版
·innerHTML在Firefox和Opera下的执行特例
·纯CSS的下拉菜单 支持IE6 IE7 Firefox
·分享个极好的无刷新二级联动下拉列表,同样适用与firefox
·firefox FTP合二为一 工作省心又方便
·优化firefox提高上网浏览速度
·支持IE6 IE7 Firefox的纯CSS的下拉菜单
·火狐firefox FTP合二为一 工作省心又方便
·Firefox 必装的几款 NB 插件
·Firefox 使用常见问题和解决方法
·不可或缺 20个必备的Firefox插件
·FireFox对XML的处理兼容IE的节点处理方法
·IE和Firefox在JavaScript方面的兼容性
·换种思路 让Firefox用上迅雷下载
·没有不可能 让Firefox也用上Web迅雷
·解决Firefox上网看不了Flash网页的问题
·Firefox的32个插件介绍
·FireFox使用的几个好用的绝招
·推荐一些实用的Firefox扩展

CSS在IE与Firefox下的兼容性

日期:2007年9月18日 作者: 查看:[大字体 中字体 小字体]


  1.DOCTYPE 影响 Css 处理

  2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

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

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

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

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

  7.cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以

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

  9.在mozilla Firefox和IE中的BOX模型解释不一致导致相差2px解决方法:div{margin:30px!important;margin:28px;}

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

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

  10.IE5 和IE6的BOX解释不一致

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

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

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

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

  就能解决大部分问题

  注意事项:

  1、float的div一定要闭合。

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

  <#div id=\"floatB\" >

  <#div id=\"NOTfloatC\" >

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

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

  在<#div class=\"floatB\">

  <#div class=\"NOTfloatC\">

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

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

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

  clear:both;}

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

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

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

  overflow:hidden;

  zoom:1;

  margin:5px auto;}

  2、margin加倍的问题。

  设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
  解决方案是在这个div里面加上display:inline;
例如:
<#div id=\"imfloat\">


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

  3、关于容器的包涵关系

  很多时候,尤其是容器内有平行布局,例如两、三个float的div时,宽度很容易出现问题。在IE中,外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。

  4、关于高度的问题

  如果是动态地添加内容,高度最好不要定义。浏览器可以自动伸缩,然而如果是静态的内容,高度最好定好。(似乎有时候不会自动往下撑开,不知道具体怎么回事)

  5、最狠的手段 - !important;

  如果实在没有办法解决一些细节问题,可以用这个方法.FF对于"!important"会自动优先解析,然而IE则会忽略.如下.tabd1{

[1] [2] 下一页 




上一篇:Flash教程:AS3.0 实现FLASH的“动态链接库”

下一篇:金碧辉煌 Photoshop打造绚丽夜景

CSS在IE与Firefox下的兼容性 相关文章:
·大容量内存的电脑提速技巧
·WinRAR 3.70正式版发布 完美兼容Vista
·电源不认硬盘?浅谈电源的兼容性
·巧妙突破大容量邮箱附件大小限制
·轻松建站 主流ASP内容管理系统
·Windows XP下巧妙修改硬盘分区容量
·用WinMail在家中搭建无限容量邮件服务器
·FireFox对XML的处理兼容IE的节点处理方法
·IE和Firefox在JavaScript方面的兼容性
·大容量硬盘好处多 如何分区才合理?
CSS在IE与Firefox下的兼容性 相关软件:
·台湾 热卖的 美容大王
·《连连看》豪华兼容版
·美丽元素-多个美容小技巧(翻页)
·XfokSite.Net网站内容管理系统 v2.0 Build 0622
·我恋爱,我容易吗
·可慧网站内容管理系统KWCMS v6.62 免费版
·XfokSite.Net网站内容管理系统 v2.0 Build 0803
·宽容
·ACMS 内容管理系统v2.0 五一特别个人版
·中国美容美发网(1ok9ok.com)全站程序

特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
[打印本页] [关闭窗口] 转载请注明来源:http://www.viphot.com
| 帮助(?) | 版权声明 | 友情连接 | 关于我们 | 信息发布
Copyright 2007 www.viphot.com All Rights Reserved. 鄂ICP备05000083号Powered by:vipcn