当前位置:  编程技术>WEB前端

CSS兼容要点分析

    来源: 互联网  发布时间:2014-09-06

    本文导语:  IE vs FF CSS 兼容要点: DOCTYPE 影响 CSS 处理 FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 FF: 设置 padding 后, d...

IE vs FF

CSS 兼容要点:

DOCTYPE 影响 CSS 处理

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

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

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

FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

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

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

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

使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面,省的大家四处找^^

1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:

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

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

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

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

2.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不支持,如果有人理解的话,请告诉我一声,谢了!:)

3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义

ul{margin:0;padding:0;}

就能解决大部分问题

4.关于脚本,在xhtml1.1中不支持language属性,只需要把代码改为



    
 
 

您可能感兴趣的文章:

  • CSS hack浏览器兼容一览表
  • 处理CSS3跨浏览器兼容的工具 Prefixr
  • CSS Div 最小高度在IE 6 和IE 7中的兼容性问题
  • 使css兼容IE8的小技巧
  • CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
  • css 兼容性问题this.style.cursor=''hand''
  • 在到达无H无F境界前~还是要痛苦~我兼容浏览器的CSS
  • 多浏览器css兼容分析小结
  • 不用js多浏览器兼容纯DIV/CSS对联漂浮广告代码
  • css浏览器不兼容原因分析及解决办法第1/2页
  • css实现兼容各个浏览器的技巧的代码
  • Css浏览器兼容的解决方法
  • 浏览器兼容解决FF/IE6/IE7背景专用CSS HACK
  • CSS Hack 汇总速查手册浏览器兼容必会
  • 解决IE5/IE5.5/IE6/FF的兼容性问题——CSS
  • CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法
  • IE7 beta2的CSS兼容性
  • 网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容
  • div+CSS 兼容小摘
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 不要使用CSS Expression的原因分析
  • div+css在思路和流程上实现结构与表现的分离分析
  • IE6不能正常解析CSS文件问题的解决方法及原因分析
  • CSS中box(盒模式)的分析
  • DIV+CSS布局的网站对网站SEO的影响分析
  • IE对CSS样式表的限制分析与解决方案
  • CSS的inherit与auto使用分析
  • 欲练CSS ,必先解决IE的一些细节分析
  • CSS对Web页面载入效率的影响分析总结
  • 详细分析css float 属性以及position:absolute 的区别
  • java命名空间javax.swing.text.html类css的类成员方法: css定义及介绍
  • <!--@import"css/cssset/.css-->,css/cssset/.css是什么意思?
  • java命名空间javax.swing.text.html类css的类成员方法: getattribute定义及介绍
  • CSS预处理器 Less CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: font定义及介绍
  • css强制换行 css强制不换行的css方法
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: margin定义及介绍
  • CSS代码格式化 CSS Beautify
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: padding定义及介绍
  • jquery css类用法(添加、修改与删除css)
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: border定义及介绍
  • CSS 框架 Simpl.css
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: clear定义及介绍
  • CSS解析器 CSS Parser
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: height定义及介绍
  • CSS压缩器 Css Compressor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: color定义及介绍
  • Eclipse的CSS编辑插件 CSS Editor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: display定义及介绍
  • jQuery添加/改变/移除CSS类及判断是否已经存在CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: float定义及介绍


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3