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

多浏览器css兼容分析小结

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

    本文导语:  CSS 兼容要点:  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: ...

CSS 兼容要点: 
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 特别设置样式。 
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 中插入一个空格。

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属性,只需要把代码改为 
 
就可以了。

    
 
 

您可能感兴趣的文章:

  • 通过javascript实现DIV居中,兼容各浏览器版本
  • CSS hack浏览器兼容一览表
  • JSP中用回车监听按钮事件兼容火狐 IE等主流浏览器
  • 处理CSS3跨浏览器兼容的工具 Prefixr
  • Iframe自适应高度兼容ie,firefox多浏览器
  • 都是IE惹的祸多浏览器兼容问题
  • php文件下载代码(多浏览器兼容、支持中文文件名)
  • 兼容ie6浏览器的php下载文件代码分享
  • 在到达无H无F境界前~还是要痛苦~我兼容浏览器的CSS
  • 不用js多浏览器兼容纯DIV/CSS对联漂浮广告代码
  • jquery禁用右键、文本选择功能、复制按键的代码(兼容多浏览器)
  • jQuery.event兼容各浏览器的event详细解析
  • jQuery右下角弹出广告代码兼容多浏览器
  • php下载文件代码(兼容ie6浏览器) iis7站长之家
  • jquery div拖拽效果(兼容浏览器)
  • css浏览器不兼容原因分析及解决办法第1/2页
  • css实现兼容各个浏览器的技巧的代码
  • Css浏览器兼容的解决方法
  • Web系统通过EXE文件实现读取客户电脑MAC等硬件信息且兼容非IE浏览器
  • 兼容各个浏览器的技巧
  • CSS Hack 汇总速查手册浏览器兼容必会
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 最新谷歌浏览器(google chrome)官方正式稳定版下载(2014版_2015版谷歌浏览器下载)
  • Android 图片浏览器 雪梦图片浏览器
  • 设置sharepoint 2010文档库中的 pdf文件在浏览器中访问的打开方式
  • 使用php检测用户当前使用的浏览器是否为IE浏览器
  • IE(Internet Explorer)浏览器中启用cookie的步骤
  • 如何防止按浏览器右上角的"x" 来关闭浏览器
  • 微软浏览器IE 11(InternetExplorer 11)简体中文预览版介绍及下载地址
  • 我的IE浏览器崩溃,怎么办?(不能浏览了!)急。。。。。
  • php5中当浏览器禁用cookie时保持会话session的方法
  • 用浏览器看applet,总是只能看到修改前的applet,关了浏览器,再开,还是只能看到修改前的,难道真的要重启机子?太夸张了
  • 浏览器不能浏览JAVA2写的Applet,那里可有升级包?
  • 新手请教一段javascript代码,如何设置浏览者浏览器的字体?
  • 如何在red hat的网页浏览器中浏览使用ipv6协议的网页?
  • 第一天接触LINUX,我的LINUX自带的网景浏览器为何浏览网页的时候问题如此多呢???
  • 我的小应用程序在JCREATOR的Appletviewer里可以浏览但是不能在浏览器里运行这是为什么
  • 用3G无线上网卡上网必须用sudo运行浏览器才能浏览网页!
  • 菜鸟用tomcat3.2,在他的root目录下建立了一个test1.jsp.用浏览器显示正常,但我后来删掉了,可用浏览器还可以看到test1.jsp,这是怎么回事
  • linux系统下的火狐浏览器在浏览网页的时候一直提示:您需要其他插件以显示此页面的所有媒体
  • (新手)请教如何通过tomcat运行自己写的jsp,在浏览器上浏览页面?
  • redhat9.0下,我安装了紫光输入法和firefox浏览器,结果发现在firefox下用“Ctrl-Shift”切换不出输入法,怎么办?有其他输入法或者浏览
  • 糖果浏览器 TangoBrowser
  • jquery判断浏览器类型($.browser用法)
  • jquery检测浏览器名称和版本信息的例子
  • 搜狗浏览器
  • Linux浏览器 Konqueror
  • 自动浏览器功能测试 Browserscope
  • 几个applet位于同一台机器的不同浏览器中,它们怎么进行信息的传递?
  • FC 5 下浏览器打不开?
  • linux浏览器问题!很急。
  • 手机地图浏览器 jvnmobilegis
  • IE浏览器插件 IE DOM Inspector


  • 站内导航:


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

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

    浙ICP备11055608号-3