我的浏览器兼容实践

简介:

目标:兼容IE6 IE7 Firefox

        当我和我们的美工开始着手进行网站的浏览器兼容工作的时候,有一个明显的感觉:以前我们被IE惯坏了,由奢入俭难,改变坏毛病是不容易啊;如何现存系统进行浏览器兼容呢?以后的工作中怎么进行浏览器兼容呢?

       开始我用事先想好的一套:用搜索引擎搜索出来各种浏览器兼容的方案,比如:两个层重叠了怎么处理,表格撑开了怎么处理...然后整理出来一份文档放在团队共享。我的确就是这样做的,从早晨开始做到晚上8点,也有“成就”:40多页的文档;可就在临睡觉之前我意识到这是一件“勤劳而愚蠢的事情”。

        原因:页面对了,不考虑浏览器对HTML元素渲染的差别,那么在所有浏览器中显示基本一样;但是页面错了那就花样百出了。比如同样是一个DIV的闭合标签没有写,在火狐里面,有可能一个页面是表现成层重叠,另一个页面表现为这个层跑到页面最下面了。而在IE中这有可能是完全正常的。我做的工作是什么呢?是在穷举出所有的错误情况并找出解决方案,岂不荒唐

       无论整体思路有没有,手头的问题还是要解决的,在解决问题的过程中,一切豁然开朗;

       那是一个系统中最重要的页面,也是在火狐中最混乱的页面:有一部分功能被覆盖,左右两个DIV一上一下,随着页面内容展开footer不自动往下延伸...经过两天的奋战页面正常了,回头看看我们到底做了什么呢?我们实质上是在无限的靠近W3C标准。

        于是,一个个问题迎刃而解:对于现存的页面,用W3C验证工具,从Fatal级别的错误开始解决;以后的开发中页面的浏览器兼容怎么保证----只要遵循W3C标准做就可以了。这里有一个技巧,不是所有浏览器都完美的支持W3C的所有标准,同时W3C标准在有些地方的确吹毛求疵,所以我们大体上遵循W3C的标准,但是页面上并不添加W3C的声明。

        做浏览器兼容开始做的比较累,后来找到一个工具,一开始我只告诉她,没想到一传十十传百,竟成了众人皆知的秘密(玩笑了)----FireBug+Yslowhttp://com3.devnet.re3.yahoo.com/yslow/  前者是调试脚本和页面样式的绝佳工具,可以在脚本中设置断点。后者则是根据High performance Web sites提到的14条原则做成了一个工具:

YSlow analyzes web pages and tells you why they're slow based on the rules for high performance web sites. YSlow is a Firefox add-on integrated with the popular Firebug web development tool.


做浏览器兼容时遇到的一些脚本兼容问题:

1.Firefox里面不能操作剪贴板(有曲线救国之策么?)

2.IE里面的event.srcElementFireFox里面是event.target注意兼顾

3.IE里面的 div.innerText;在FireFox里面是div.textContent;

4.文本超长自动省略: style="overflow: hidden; text-overflow: ellipsis;  width: 260px; white-space: nowrap; cursor: pointer; "注意要删掉页面上的W3c标准!

5.如果真的需要为不同的浏览器做区分那么可以

if (window.navigator.userAgent.indexOf("MSIE")>=1)  //IE6 7

if (window.navigator.userAgent.indexOf("Firefox")>=1)  //FF

6.CSS方面也有一些做浏览器兼容的策略 就不越俎代庖了 可以搜索一下

 

总结一下:

1.  遵循标准但是不把W3C标准声明添加到页面上,这种做法在时间和页面质量之间做了一个折衷

2.对现存的页面做美化 可以从验证W3C开始 这是一个好的切入点

3.浏览器兼容在新页面的开发时就要考虑,完成之后再做成本是完全不一样的 类似于代码重构

4.有些javascript编写也要关注一些敏感的浏览器兼容问题

5.多说一句:页面开发人员学一点CSS的知识对于解决浏览器兼容的问题是很有帮助的

目录
相关文章
|
8月前
|
存储 监控 安全
360 企业安全浏览器基于阿里云数据库 SelectDB 版内核 Apache Doris 的数据架构升级实践
为了提供更好的日志数据服务,360 企业安全浏览器设计了统一运维管理平台,并引入 Apache Doris 替代了 Elasticsearch,实现日志检索与报表分析架构的统一,同时依赖 Doris 优异性能,聚合分析效率呈数量级提升、存储成本下降 60%....为日志数据的可视化和价值发挥提供了坚实的基础。
360 企业安全浏览器基于阿里云数据库 SelectDB 版内核 Apache Doris 的数据架构升级实践
|
8月前
|
Web App开发 前端开发 JavaScript
构建跨浏览器兼容的前端应用:技术实践与挑战
【5月更文挑战第16天】构建跨浏览器兼容的前端应用是应对浏览器差异和多样性的挑战。使用现代框架(如React、Vue)能自动转换代码,编写可移植的Web标准代码,结合浏览器兼容性测试工具和Polyfill解决旧浏览器支持问题。关注浏览器更新,应对性能、API差异和样式问题,采用渐进增强、条件判断和CSS Reset策略确保应用在各种浏览器上运行良好。
|
8月前
|
存储 安全 前端开发
浏览器跨窗口通信:原理与实践
浏览器跨窗口通信:原理与实践
371 0
|
存储 移动开发 缓存
📚现代化浏览器本地存储解决方案以及落地实践
前言 最近在项目需要做数据存储,调研到了localforage这个库,在项目中也使用了,接下里我来介绍下它的实现方式以及在React项目如何落地(直接copy下面的hooks解决方案就可以在项目中使用了) 使用
154 0
|
Web App开发 HTML5 移动开发
浏览器桌面通知Notification实践
  一言不合就上图:   最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推送对不对,这个时chrome浏览器的截图,出现在右下角,其他浏览器的样式可能有些微差别。
2920 0
|
存储 自然语言处理 JavaScript
浏览器工作原理和实践(二)——JavaScript
  《浏览器工作原理与实践》是极客时间上的一个浏览器学习系列,在学习之后特在此做记录和总结。
浏览器工作原理和实践(二)——JavaScript
|
Web App开发 缓存 前端开发
浏览器工作原理和实践(一)——浏览器
  《浏览器工作原理与实践》是极客时间上的一个浏览器学习系列,在学习之后特在此做记录和总结。
浏览器工作原理和实践(一)——浏览器
|
存储 Web App开发 缓存
浏览器工作原理和实践(三)——页面 (下)
  《浏览器工作原理与实践》是极客时间上的一个浏览器学习系列,在学习之后特在此做记录和总结。
浏览器工作原理和实践(三)——页面 (下)
|
消息中间件 Web App开发 监控
浏览器工作原理和实践(三)——页面 (上)
  《浏览器工作原理与实践》是极客时间上的一个浏览器学习系列,在学习之后特在此做记录和总结。
浏览器工作原理和实践(三)——页面 (上)
|
C语言
《C语言及程序设计》实践参考——二进制文件浏览器
返回:贺老师课程教学链接 【项目5 - 二进制文件浏览器】 (1)做一个类似BinaryViewer的查看二进制文件的程序,输入文件名后,可以以16进制和ASCII对照的方式列出该文件的内容,可以参考下图: 提示:循环中,一次读入16个字节,先用16进制形式输出,再用字符形式输出。 [参考解答] #include <stdio.h> #include
969 0
下一篇
开通oss服务