神马文学网我的浏览器兼容实践 - 回头再说 坚强2002的博客 - 博客园
来源：百度文库 编辑：神马文学网 时间：2024/04/29 03:22:56
目标：兼容IE6 IE7 Firefox；
当我和我们的美工开始着手进行网站的浏览器兼容工作的时候，有一个明显的感觉：以前我们被IE惯坏了，由奢入俭难，改变坏毛病是不容易啊；如何现存系统进行浏览器兼容呢？以后的工作中怎么进行浏览器兼容呢？
开始我用事先想好的一套：用搜索引擎搜索出来各种浏览器兼容的方案，比如：两个层重叠了怎么处理，表格撑开了怎么处理...然后整理出来一份文档放在团队共享。我的确就是这样做的，从早晨开始做到晚上8点，也有“成就”：40多页的文档；可就在临睡觉之前我意识到这是一件“勤劳而愚蠢的事情”。
原因：页面对了，不考虑浏览器对HTML元素渲染的差别，那么在所有浏览器中显示基本一样；但是页面错了那就花样百出了。比如同样是一个DIV的闭合标签没有写，在火狐里面，有可能一个页面是表现成层重叠，另一个页面表现为这个层跑到页面最下面了。而在IE中这有可能是完全正常的。我做的工作是什么呢？是在穷举出所有的错误情况并找出解决方案，岂不荒唐
无论整体思路有没有，手头的问题还是要解决的，在解决问题的过程中，一切豁然开朗；
那是一个系统中最重要的页面，也是在火狐中最混乱的页面：有一部分功能被覆盖，左右两个DIV一上一下，随着页面内容展开footer不自动往下延伸...经过两天的奋战页面正常了，回头看看我们到底做了什么呢？我们实质上是在无限的靠近W3C标准。
于是，一个个问题迎刃而解：对于现存的页面，用W3C验证工具，从Fatal级别的错误开始解决；以后的开发中页面的浏览器兼容怎么保证----只要遵循W3C标准做就可以了。这里有一个技巧，不是所有浏览器都完美的支持W3C的所有标准，同时W3C标准在有些地方的确吹毛求疵，所以我们大体上遵循W3C的标准，但是页面上并不添加W3C的声明。
做浏览器兼容开始做的比较累，后来找到一个工具，一开始我只告诉她，没想到一传十十传百，竟成了众人皆知的秘密（玩笑了）----FireBug+Yslow；http://com3.devnet.re3.yahoo.com/yslow/ 前者是调试脚本和页面样式的绝佳工具，可以在脚本中设置断点。后者则是根据High performance Web sites提到的14条原则做成了一个工具：
YSlow analyzes web pages and tells you why they're slow based on therules for high performance web sites. YSlow is aFirefox add-on integrated with the popularFirebug web development tool.
做浏览器兼容时遇到的一些脚本兼容问题：
1.Firefox里面不能操作剪贴板（有曲线救国之策么？）
2.IE里面的event.srcElement在FireFox里面是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的知识对于解决浏览器兼容的问题是很有帮助的
回头再说，现在开始......
当我和我们的美工开始着手进行网站的浏览器兼容工作的时候，有一个明显的感觉：以前我们被IE惯坏了，由奢入俭难，改变坏毛病是不容易啊；如何现存系统进行浏览器兼容呢？以后的工作中怎么进行浏览器兼容呢？
开始我用事先想好的一套：用搜索引擎搜索出来各种浏览器兼容的方案，比如：两个层重叠了怎么处理，表格撑开了怎么处理...然后整理出来一份文档放在团队共享。我的确就是这样做的，从早晨开始做到晚上8点，也有“成就”：40多页的文档；可就在临睡觉之前我意识到这是一件“勤劳而愚蠢的事情”。
原因：页面对了，不考虑浏览器对HTML元素渲染的差别，那么在所有浏览器中显示基本一样；但是页面错了那就花样百出了。比如同样是一个DIV的闭合标签没有写，在火狐里面，有可能一个页面是表现成层重叠，另一个页面表现为这个层跑到页面最下面了。而在IE中这有可能是完全正常的。我做的工作是什么呢？是在穷举出所有的错误情况并找出解决方案，岂不荒唐
无论整体思路有没有，手头的问题还是要解决的，在解决问题的过程中，一切豁然开朗；
那是一个系统中最重要的页面，也是在火狐中最混乱的页面：有一部分功能被覆盖，左右两个DIV一上一下，随着页面内容展开footer不自动往下延伸...经过两天的奋战页面正常了，回头看看我们到底做了什么呢？我们实质上是在无限的靠近W3C标准。
于是，一个个问题迎刃而解：对于现存的页面，用W3C验证工具，从Fatal级别的错误开始解决；以后的开发中页面的浏览器兼容怎么保证----只要遵循W3C标准做就可以了。这里有一个技巧，不是所有浏览器都完美的支持W3C的所有标准，同时W3C标准在有些地方的确吹毛求疵，所以我们大体上遵循W3C的标准，但是页面上并不添加W3C的声明。
做浏览器兼容开始做的比较累，后来找到一个工具，一开始我只告诉她，没想到一传十十传百，竟成了众人皆知的秘密（玩笑了）----FireBug+Yslow；http://com3.devnet.re3.yahoo.com/yslow/ 前者是调试脚本和页面样式的绝佳工具，可以在脚本中设置断点。后者则是根据High performance Web sites提到的14条原则做成了一个工具：
YSlow analyzes web pages and tells you why they're slow based on therules for high performance web sites. YSlow is aFirefox add-on integrated with the popularFirebug web development tool.
做浏览器兼容时遇到的一些脚本兼容问题：
1.Firefox里面不能操作剪贴板（有曲线救国之策么？）
2.IE里面的event.srcElement在FireFox里面是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的知识对于解决浏览器兼容的问题是很有帮助的
回头再说，现在开始......
我的浏览器兼容实践 - 回头再说 坚强2002的博客 - 博客园
再说波段操作-《我的投资观和实践》
回头草 文章-胡大平的博客-专家博客
oracle学习--循环语句 - 不一样的坚强 - 博客园
解决跨浏览器兼容的CSS编码准则
再说中国古代的纸币 - 汪圣铎的日志 - 网易博客
再说波段操作-《我的投资观和实践》（转载）
人，不可碌碌无为! 再说猛人张居正 - 行者的日志 - 网易博客
25，我的买入策略-《我的投资观和实践》的旁白-搜狐博客
26，我的卖出策略 -《我的投资观和实践》的旁白-搜狐博客
视角的力量--再说OO设计原则 - 新手专题 - 知识库 - 博客园
断夫妻之间------实践速断要决！ - 博客 BLOG x5dj.com 我的世界 我的...
我为什么使用Firefox浏览器-月光博客
网上通信——再说毛 - yucc的博客 | 余传琮的博客 | 博联社
儿童博客社区建设的实践总结
陈宝存：楼市调控不撞南墙不回头-陈宝存的搜狐博客-搜狐博客
多OS、多浏览器测试你的网站或博客
谁控制了我们的浏览器？-月光博客
推荐书目-《我的投资观和实践》的旁白-搜狐博客
买基和炒股-《我的投资观和实践》的旁白-搜狐博客
12，如何选择基金？-《我的投资观和实践》的旁白-搜狐博客
struts开发 实践—实用小贴士 -- 我的blog -- [北方博客]
我要坚强的活着
如何在多浏览器兼容的情况下得到鼠标选择的文字