浏览器内核
Trident：IE类
Gecko：FireFox
Presto：Opera
Webkit：Chrome，Safari
javascript兼容性问题
1 在标准的事件绑定中绑定事件的方法函数为 addEventListener,而IE使用的是attachEvent
2 标准浏览器采用事件捕获的方式对应IE的事件冒泡机制（即标准由最外元素至最内元素或者IE由最内元素到最外元素）
3 事件处理中非常有用的event属性获得亦不相同，标准浏览器是作为参数带人，而ie是window.event方式获得，获得目标元素ie为e.srcElement 标准浏览器为e.target
4 然后在ie中是不能操作tr的innerHtml的
5 然后ie日期函数处理与其它浏览器不大一致，比如： var year= new Date().getYear(); 在IE中会获得当前年，但是在firefox中则会获得当前年与1900的差值。
6 获得DOM节点的方法有所差异，其获得子节点方法不一致。
IE：parentElement parentElement.children
Firefox：parentNode parentNode.childNodes
当html中节点缺失时，IE和Firefox对parentNode的解释不同
IE：input.parentNode的值为空节点
Firefox：input.parentNode的值为form
Firefox中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)
7 ajax兼容性
CSS兼容
1 CSS Hack
2 css盒模型在IE6下解析有问题
3 IE6的双倍边距BUG，在块级元素浮动后本来外边距10px,但IE解释为20px,解决办法是加上display: inline
4 IE6下图片下方有空隙产生；
img 为display:block，或者设置vertical-align 属性为vertical-align:top bottom middle text-bottom都可以解决.
5 IE6 3px bug 两个浮动层中间有间隙
解决的办法是给右边元素也同样浮动 float:left
或者相对IE6定义.left margin-right:-3px;
6 在IE6中没有min-width的概念
7 IE6无法定义1px左右高度的容器
解决方案：overflow:hidden zoom:0.08 line-height:1px
8 使用margin ： 0 auto；方法使容器居中依然在IE6中行不通，我们要对其父容器使用text-align:center
9 被点击访问过的超链接样式不在具有hover和active了
解决方法是改变CSS属性的排列顺序: L-V-H-A <style type="text/css"> a:link {} a:visited {} a:hover {} a:active {} /style>
10 在使用绝对定位/相对定位时，设置z-index在ie中可能会失效，是因为其元素依赖于其父元素的z-index，而父元素默认为0
11 外边距叠加问题：
#box{ margin:10px; background-color:Red; }
#box p { margin:20px; background:gray; }
<div id="box"><p>dd</p></div>
该代码会导致外边距叠加，并且外边距跑到div包裹外去，bug是由于块级子元素高度计算方式造成的。
12 layout元素有以下特点：
（1）拥有布局（haslayout=true）元素不会收缩，所以可能会发生文字截断、消失的现象；
（2）布局元素对浮动自动清理；
（3）相对定位的元素没有布局，这可能导致绝对元素定位偏差；
（4）拥有布局的元素外边距不叠加；
（5）滚动时，页面会有所跳动；
（6）边框消失
（7）像素偏差
元素本身就 haslayout：true
<html>, <body><table>, <tr>, <th>, <td><iframe>,
<embed> (non-standard element),<object>, <applet>
<img><hr><input>, <button>, <select>, <textarea>, <fieldset>, <legend>
zoom:1，被认为是最好的触发Layout的方法。
因为它对当前元素没有影响。 触发haslayout，相对来说比haslayout=false要简单。
网友评论