`
weidan_1986
  • 浏览: 42127 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类

怎么样让自己的程序尽量兼容更多的浏览器

    博客分类:
  • html
阅读更多
现在浏览器越来越多,做为网页设计者,在设计网页时,要特别调试看下是否兼容IE, firefox, opera, chrome等目前多数人使用的流量器。这工作是相当辛苦的。如果不掌握方法规律,调试时间比设计时间还长。下边就从网上摘抄了一篇技术文章,教网页设计者从CSS网页布局排查错误出现的方法,让网页设计师的作品兼容更多的浏览器。

1. 拼写是否正确

可以使用W3C的校验,或者网页编辑软件的校验功能,来检查(X)HTML文档内的标签是否配套、嵌套顺序是否正确、空标签是否闭合,CSS拼写是否正确。不正确的嵌套、错误的拼写是非常常见的错误。

提示:现在有很多编辑软件都可以提供(X)HTML和CSS的校验功能,包括浏览器对CSS属性是否支持等。例如:Dreamweaver 8以上版本,TopStyle等软件。

提示:Firefox中的附加软件“Firebug”是一个非常好用的工具,它不仅可以检查(X)HTML、CSS和JavaScript是否正确,还可以动态显示页面内元素的框和位置,是调试网页很好的辅助插件。读者可以访问它的官方网站下载:http://www.getfirebug.com/(英文)

2. 是否有合适的DTD

在本书的其他章节里,曾经不止一次地强调过DOCTYPE的重要性,不同的DOCTYPE直接影响浏览器对于(X)HTML和CSS的解释。

3. CSS属性浏览器是否支持

虽然现代浏览器支持绝大部分的CSS 2.1规范和部分的CSS 3规范,但是在前面的章节也介绍过,有一些CSS属性还没有被浏览器广泛支持,因此在某个属性没有生效的时候,请确定浏览器是否支持。

4. 隔离问题

将有问题的地方突出出来,例如给元素加一个醒目的边框或者背景颜色。

如果增加了边框就可以解决问题,那么就是边距重叠的问题。

如果增加了背景,但是背景不显示,那么有可能是特殊性或者浮动元素没有闭合。

尝试修改一些属性,特别是会触发IE的hasLayout的属性,判断是否是IE常见的Bug。

5. 建立基本测试

如果还不能解决问题,则可以复制问题文件,然后删除多余的(X)HTML,只留下有问题的部分。

删除(X)HTML内的注释问题,看问题是否会消失。

删除元素间的空格,看问题是否会消失。

然后分块注释掉样式表,直到问题消失,则刚注释掉的样式即为问题所在。

6. 解决问题而不是解决现象

找到问题根源的所在并解决它是最终目,而不是为了迁就表现而使用复杂的Hack来让网页“看上去很美”。不从根源上解决问题,当浏览器升级以后,可能会遇到更多的问题。同时,Hack的时候可能会造成新的问题的出现,特别是触发或者避免触发IE的hasLayout属性。

换一种思路也许也可以避免问题的出现,例如将元素的margin属性取消,改为设置其父元素的padding属性。

只有实在无法解决的时候,再使用Hack。
分享到:
评论

相关推荐

    旗鱼浏览器 v2.10 64位正式版.zip

    2、完全绿色便携:建议安装或解压到非系统盘分区(即尽量不要装到C盘),User Data数据文件夹和程序在一个文件夹内,重装Windows系统也不丢任何使用数据、不需重装浏览器;当然,放到U盘里面或者移动硬盘里面也可以...

    旗鱼浏览器 v1.60 32位正式版.zip

    2、完全绿色便携:建议安装或解压到非系统盘分区(即尽量不要装到C盘),User Data数据文件夹和程序在一个文件夹内,重装Windows系统也不丢任何使用数据、不需重装浏览器;当然,放到U盘里面或者移动硬盘里面也可以...

    Ghelper-v2.8.15

    选择 "更多工具“ -> 扩展程序 打开"扩展程序“ 在这里能看到所有已安装的扩展程序。 将Ghelper-v2.8.1.crx 文件拖到这个扩展程序页面上,就能完成安装,如果拖过去没反应。你需要打开开发者模式。 Chrome 在"扩展...

    简约论坛 v4.1.zip

    1、重新改写模板使之能兼容360浏览器、360极速浏览器、火狐浏览器、Google Chrome等主流浏览器 2、删除在线人数状态,删除公告、删除图片友情链接、使论坛更加简约 3、更改论坛为主流字体:微软雅黑

    基于J2EE框架的个人博客系统项目毕业设计论...

    而越来越多专业知识的 Blog 的出现,让我们看到了 Blog 更多所蕴涵的巨大的信息价值:不同的 Blog 选择不同的内容,收集和整理成为很多人关注的专业 Blog ——目前越来越多的人获取信息的来源是一些固定的 Blog 。...

    IIS6.0 IIS,互联网信息服务

     第二篇 IIS之FTP服务器 一、建立你的FTP站点 第一个FTP站点(即“默认FTP站点”)的设置方法和更多FTP站点的建立方法请参照前文Web服务器中相关操作执行。需要注意的是,如果你要用一个IP地址对应多个不同的FTP...

    基于J2EE框架的个人博客系统项目毕业设计论文(源码和论文)

    而越来越多专业知识的 Blog 的出现,让我们看到了 Blog 更多所蕴涵的巨大的信息价值:不同的 Blog 选择不同的内容,收集和整理成为很多人关注的专业 Blog ——目前越来越多的人获取信息的来源是一些固定的 Blog 。...

    品络企业网站系统 1.0.rar

    六、DIV CSS布局,全部兼容IE6、IE7、IE8、火狐等主流浏览器; 七、栏目、留言、新闻、产品等等模块,均可以无限级别分类,后台可以图文修改、添加、删除等等,前台调用数据也简单灵活,可在此基础上开发出不同的...

    Borland C++ Builder 6.0 Build 10.166 汉化 补丁 终结版 .rar

    Borland C++ for Linux,增强了对于 Microsoft Visual C++ 源程序的兼容程度,提供 MFC 6.0 版与 ATL 3.0 版函数库,比起 Visual C++ 的 MFC 来,VCL 要先进得多。 ----------------------------------------------...

    手机网页设计制作简明指南

    谷歌花了很多功夫在让网页应用程序适合手机使用上,谷歌的开发者将看手机网页人群分为三大类: A:一般手机用户 一般手机用户访问手机网页时和用电脑访问网页差不多,他们没有特别热衷于哪个领域,他们只是利用...

    淘客帝国v5.12完美破解版

    特点:完美破解,永不受官方的限制! 安装方法: ...其他高级功能:更多功能不再细致描述! 【运行环境】 1:Windows 平台:IIS/Apache + PHP(V5.1以上) 2:Linux/Unix 平台:Apache + PHP(V5.1以上)

    千博企业网站管理系统-.net

    千博企业网站管理系统遵循多浏览器、高速度的 W3C 标准核心思想,以尽量避免在各个浏览器中的差异性,不会因为浏览器的不同而系统功能受到限制。千博企业网站管理系统流畅的设计不仅提升用户体验,而且以视觉的美感...

    jquery插件使用方法大全

    它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX...

    千博企业网站管理系统

    千博企业网站管理系统遵循多浏览器、高速度的 W3C 标准核心思想,以尽量避免在各个浏览器中的差异性,不会因为浏览器的不同而系统功能受到限制。千博企业网站管理系统流畅的设计不仅提升用户体验,而且以视觉的美感...

    配置好的傻瓜化小狼毫全拼+多种双拼+五笔86-98+笔画输入法v200312 - 17种方案

    快捷键尽量与传统输入法和主流输入法兼容,基本不需学习; 7.附带详尽的说明文档。除了网上现有的文档外,专门按照修改目的为向导整理出来的修改指南,只需搜索要修改的关键词即可快速找到修改方法,DIY定制无比...

    千博二手车网站系统 v2020 Build0728

    千博二手车网站系统遵循多浏览器、高速度的 W3C 标准核心思想,以尽量避免在各个浏览器中的差异性,不会因为浏览器的不同而系统功能受到限制。千博二手车网站系统流畅的设计不仅提升用户体验,而且以视觉的美感提高...

    千博二手车网站系统-.net

    千博二手车网站系统遵循多浏览器、高速度的 W3C 标准核心思想,以尽量避免在各个浏览器中的差异性,不会因为浏览器的不同而系统功能受到限制。千博二手车网站系统流畅的设计不仅提升用户体验,而且以视觉的美感提高...

    入门学习Linux常用必会60个命令实例详解doc/txt

    普通用户只能修改自己的Shell,超级用户可以修改全体用户的Shell。要想查询系统提供哪些Shell,可以使用chsh -l 命令,见图1所示。 图1 系统可以使用的Shell类型 从图1中可以看到,笔者系统中可以使用的Shell有...

    青果校园兼职网,阿赛企业网站管理

    31、仿百度弹窗留言本:完美仿百度右下角弹窗留言本功能,用户可在任意页面提交留言信息,支持火狐、IE等各大主流浏览器; 32、阿赛原创聊天系统:直接从后台开启,与留言弹窗配合使用,完美互动,支持即时聊天、...

Global site tag (gtag.js) - Google Analytics