浏览器兼容性的若干注意点小结

浏览器兼容性的若干注意点小结

总结一下IE6和 IE7和 Firefox 的CSS hack写法
形象的总结一下Firefox 、IE6、IE7三种浏览器的CSS Hack写法：（其中橙色代表FF、蓝色代表IE6、绿色代表IE7）
区别IE6与FF：
background: orange;  *background: blue;

区别IE6与IE7：
background: green !important;  background: blue;

区别IE7与FF：
Background: orange;  * background: green;

区别FF，IE7，IE6：
background: orange; *background: green !important; *background: blue;

备注：
IE都能识别*，标准浏览器（如FF）不能识别*；
IE6能识别*，但不能识别 !important；
IE7能识别*，也能识别 !important；
FF不能识别*，但能识别 !important；
不管是什么方法，书写的顺序都是Firefox的写在前面，IE7写在中间，IE6写在最后面。

我的浏览器兼容实践
目标：兼容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 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.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与Firefox差异列表  回复 引用 

--------------------------------------------------------------------------------
1. 当一个对象为不可见时，在IE中是不可以设置它集中焦点的，但是在Firefox里可以
2. 向表(Table)追加行：
在FF、Safari、Opera等浏览器中，用document.createElement创建行后用document.appendChild将行直接添加到表上。但是在IE里不可以，而

且没有任何错误提示，这时候，需要为表添加表体(tbody)，然后将新创建的行添加到表体(tbody)，
3. childNodes的不同：Firefox把回车后的空白当作文本节点，而ie不是
4. innerText是IE专有的方法，textContent是Firefox专有的，innerHTML则两者都兼容
5. 设置某个node对象的style class名称。
ie中要设置某个node的class用”className”作为attr来set或者get。
ff等其它的浏览器用”class”作为attr来set或者get。
6. 事件对象。ie用window.event,ff用event
7. 事件作用对象。ie用objEvent.srcElement，ff用objEvent.target
8，document.form.item 问题。
ie中用document.formName.item("itemName")
ff中改用 document.formName.elements["elementName"]
9。集合类对象取用时使用 ()，IE 能接受，MF 不能。解决方法：改用 [] 作为下标运算
10，window.event 无法在 fF 上运行
11，HTML 对象的 id 作为对象名的问题
现有问题：在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 fF 中不能。
解决方法：用 getElementById("idName") 代替 idName 作为对象变量使用
11，变量名与某 HTML 对象 id 相同的问题
现有问题： fF中，对象 id 不作为 HTML 对象的名称，所以可使用与 HTML 对象 id 相同的变量名，IE 中不能
解决方法：在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。此外，最好不要取与 HTML 对象 id 相同的变量名，以

减少错误
12，event.x 与 event.y 问题
现有问题：在IE 中，event 对象有 x, y 属性，fF中没有。
解决方法：
在fF中，与event.x 等效的是 event.pageX。但event.pageX IE中没有。
故采用 event.clientX 代替 event.x。在IE 中也有这个变量。
event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。
如果要完全一样，可以稍麻烦些：mX = event.x ? event.x : event.pageX;然后用 mX 代替 event.x
13，父结点的问题
在ff中没有 parentElement parement.children 而用 parentNode parentNode.childNodes。childNodes的下标的含义在IE和fF中不同，fF使

用DOM规范，childNodes中会插入空白文本节点。一般可以通过node.getElementsByTagName()来回避这个问题。
14，const 问题
现有问题：在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
解决方法：不使用 const ，以 var 代替。
15，body 对象
fF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在
16，nodeName 和 tagName 问题
现有问题：在ff中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，nodeName 的使用好象有问题。
解决方法：使用 tagName，但应检测其是否为空
17，元素属性
IE下 input.type属性为只读，但是ff下可以修改
18，document.getElementsByName() 和 document.all[name] 的问题
现有问题：在 IE 中，getElementsByName()、document.all[name] 均不能用来取得 div 元素（是否还有其它不能取的元素还不知道）。
19,对空格符的处理。按照HTML的标准，空格字符是 。在ff中，如果你误写成&nbsp（少了一个分号）一定 不会被FireFox认为是空格，

FireFox会认为它是&nbsp。而在IE中，如果你误写成&nbsp（少了一个分号）IE智 能地认为它是空格。
20,对注释的处理。
按照HTML的标准，注释的操作是放在<!--和-->之间的，而且注释中不能有--，否则会产生 HTML解析错误