览器兼容性的那点问题

阅读更多

一.主流浏览器内核

Trident：IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到目前的IE7。Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器涌现（如 Maxthon、TheWorld 、TT、GreenBrowser、AvantBrowser等）。

 

Geckos： Netcape6开始采用的内核，后来的Mozilla FireFox也采用了该内核，Geckos的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。

 

Webkit：Safari浏览器使用的内核。Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL(General Public License )条约下授权。Webkit也是自由软件，同时开放源代码。在安全方面不受IE、Firefox的制约，所以Safari浏览器还是比较安全的浏览器。

 

二．Web标准

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面。

　　1．结构标准语言

　　（1）XML

　　XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0。

　　（2）XHTML

　　XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。

　　2. 表现标准语言

　　CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考http://www.w3.org/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。

　　3.行为标准

　　（1）DOM

　　DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范，DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。

 

 

三.浏览器的下载和渲染顺序

 

IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的(多线程)。在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（但并不是说所有相关联的元素都已经下载完。）在下载过程中，如果遇到某一标签是嵌入文件，并且文件是具有语义解释性的（例如：JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。并且在下载后进行解析，解析（JS、CSS中如有重定义，后定义函数将覆盖前定义函数）过程中，停止页面所有往下元素的下载。样式表文件比较特殊，在其下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行样式渲染。并以此方式一直渲染下去，直到整个页面渲染完成。

 

 

 四，浏览器的渲染模式

由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode)，这就是二者最简单的区别。 W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。

浏览器选择工作模式的方式：

1. 浏览器要使老旧的网页正常工作，但这部分网页是没有doctype声明的，所以浏览器对没有doctype声明的网页采用quirks mode解析。 
2. 对于拥有doctype声明的网页，什么浏览器采用何种模式解析，根据声明的类型进行解析。

3. 对于拥有doctype声明的网页，这里有几条简单的规则可用于判断：对于那些浏览器不能识别的doctype声明，浏览器采用strict mode解析
4. 在doctype声明中，没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。
5.在现有有doctype声明的网页，绝大多数是应该采用strict mode进行解析的。

 

Transitional类型：是指一种过渡类型，使用这种类型浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML的语法。这种是现在通用的方法，用DW创建网页时默认就是这种类型。
Strict类型：严格类型，使用时浏览器将相对严格，不允许使用任何表现形式的标识和属性，如在元素中直接使用bgcolor背景色属性等。
Frameset类型：框架页类型。框架页面就要用这种类型了。

有个问题，就是对于IE，如果DOCTYPE前存在注释，会进入Quirks模式。

问题一.

问题二.

这个url:

http://www.baidu.com/s?wd=我来测试

 

Ie 会变成啥？

Chrome会变成啥?

Ff会变成啥 ？

 

 

六．各浏览器兼容性注意事项:

1.    减少使用document.getElmentByName(“id”)，或者document.getElmentByName(“name”)  ,ie下可以正常，但FF，Chrome不兼容，修改为 document.getElementById(“”)。

2.    在IE中,event对象有x,y 属性，可以获得event对象的clientX,clientY与offsetX,offsetY，在FF下没有event。

3.    ff 下的body在body标签没有被浏览器完全读入之前就存在，而IE必须在body完全读入之后才存在。

4.    Chrome,ff不支持document.all属性。比如：document.all.txt_name.value

5.    OVERFLOW- Y:auto;OVERFLOW-X:hidden在ie里面可以用no表示隐藏，但在ff里面必须用hidden。

6.    ff下获取鼠标按键事件跟IE不同 ,ff下 e.witch,ie下用event.keycode

7.    document.getElementById("inputname")) 在IE中都可以正确返回DOM，在其他浏览器则返回null;

8.    所有的标记都必须要有一个相应的结束标记 ,在HTML中，你可以打开许多标签，例如

和

而不一定写对应的

和

来关闭它们。在XHTML中这是不合法的。

9.    所有标签的元素和属性的名字都必须使用小写 ,大小写夹杂也是不被认可的

10.所有的XML标记,HTML标签都必须合理嵌套

前我们这样写的代码：

　　

/b>

　　必须修改为：

　　

11.所有的属性必须用引号""括起来在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如: 必须修改为： 特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用

12.把所有<和&特殊符号用编码表示 ：任何小于号（<），不是标签的一部分，都必须被编码为& l t ;任何大于号（>），不是标签的一部分，都必须被编码为& g t ;任何与号（&），不是实体的一部分的，都必须被编码为& a m p

13.XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如：

　　

　　checked>

　　必须修改为：

　　

　　value="medium" checked="checked"

14 .不要在注释内容中使“--” :

　　“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。最好不要这样写：

15. 慎用 target="_blank",XHTML1.0中不推荐使用

16. 各浏览器默认的内外边距不同

｛margin:0 padding:0｝

17. Ie chrome中table td的高度包括td的宽度，而ff不包括。

18. cursor:hand ie和 chrome中管用，ff中失效。用pointer

19.   ie中的宽度会比 chrome,ff中的窄一点。

20. 不能用cols来控制textara的宽度，FF下与其他浏览器不同，设置width

21. 发布平台菊花(一点刷新按钮，那行宽度就发生变化)，margin:  padding: 全部清0，    versincal-align middle

22. word-wrap:break-word;word-break:break-all;

break-word，强制换行

break-all，是断开单词。在单词到边界时，下个字母自动到下一行

这段在ie,chrome下正常，FF不支持

可以将内容放在div里面，然后给div设置固定宽度,在使用上边属性。

 

Js兼容性

1． document.form.item问题
代码中存在许多 document.formName.item("itemName")这样的语句：document.test_form.txt_1.value不能在FF chrome下运行，可以使用 document.test_form.elements["txt_1"].Value

2．现有代码中许多集合类对象取用时使用 ()，IE能可以，FF不能。改用 []作为下标运算。如：document.forms("formName")改为 document.forms["formName"]。
又如：

document.getElementsByName("inputName")(1)

改为 document.getElementsByName("inputName")[1]

3．HTML对象的 id作为对象名的问题
在 IE中，HTML对象的 ID可以作为 document的下属对象变量名直接使用,及时在使用name的地方可以换成id名称，但是在 FF,chrome中不能。
    用 getElementById("idName")代替 idName作为对象变量使用。

4．用idName字符串取得对象的问题
   在IE中，利用 eval(idName)可以取得 id为 idName的 HTML对象，在FF中不能。getElementById(idName)代替 eval(idName)。

var v_v_="document.getElementById('div_test_1')";

    var v_div_=eval(v_v_);   alert(v_div_);

alert(v_div_.innerHTML);

5．变量名与某 HTML对象 id相同的问题
    在 FF中，因为对象 id不作为 HTML对象的名称，所以可以使用与 HTML对象 id相同的变量名，IE中不能。在声明变量时，一律加上 var，以避免歧义，这样在 IE中亦可正常运行。最好不要取与 HTML对象 id相同的变量名，以减少错误。

6．frame在 IE中 可以用window.testFrame取得该frame，FF中不行

7．在frame的使用方面FF和ie的最主要的区别是：如果在frame标签中书写了以下属性：那么ie可以通过id或者name访问这个frame对应的window对象,而FF,chorme只可以通过name来访问这个frame对应的window对象

比如在ie下：

window.top.frameId或者window.top.frameName来访问这个window对象
    FF和chrome下： 只能这样window.top.frameName来访问这个window对象另外，在FF和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签
并且可以通过window.top.document.getElementById("testFrame").src = ''xx.htm''来切换frame的内容
也都可以通过window.top.frameName.location = ''xx.htm''来切换frame的内容

8．html中节点缺失时，IE和FF对parentNode的解释不同，例如

FF中input.parentNode的值为form,而IE中input.parentNode的值为空节点

9．FF，chrome中节点没有removeNode方法，必须使用如下方法       node.parentNode.removeChild(node)

10．url encoding
    在js中如果书写url就直接写&不要写&例如

var url = ''xx.jsp?objectName=xx&objectEvent=xxx'';
frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器一般会服务器报错参数没有找到

11．IE下 input.type属性为只读，但是chrome,FF下可以修改

 用setAttribute设置事件现有问题：

var obj = document.getElementById('objId');obj.setAttribute('onclick','funcitonname();'); FIREFOX支持，IE不支持

12. IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数如下： var obj = document.getElementById('objId');obj.onclick=function(){fucntionname();};这种方法所有浏览器都支持

13. var backendArray = test_backends.split("\n");

14. Id 不能有重复的，否则组件的值是取不到的。

 

 

在实际工作中：

 

1.我们不是为了通过校验才标准化。web标准的本意是实现内容(结构)和表现分离，就是将样式剥离出来放在单独的css文件中。这样做的好处是可以分别处理内容和表现，也方便搜索和内容的再利用。

2.平时遵守一些规范，就可能大大较少一些错误。

3.开发过程中有意识去优化网页加载速度:js ,html压缩，cache,

4. 把CSS放在文档的头部，仅需要在关闭前插入js.在这些脚本在后台加载的同时，用户先得到看似完整的页面。

5.将JS和CSS文件放在外部文件中，浏览器缓存他们要比每次调用加载速度更快些。