多浏览器兼容分析（笔记整理）

一、浏览器构成：shell+内核

Shell： 是指浏览器 的外壳：例如菜单，工具栏等。主要是提供给用户界面操作，参数设置等等。

内核：Trident（IE内核）、Gecko（Firefox内核）、Webkit（Safari、Chrome内核）、 Blink（Opera）；

浏览器内核分两部分：渲染引擎和JS引擎。渲染引擎：不同的浏览器内核对于网页的语法解释会有不同，所以渲染的效果也有不同；JS引擎：是解析Javascript语言，执行Javascript语言来实现网页的动态效果。

二、css兼容问题：

1、IE6 下默认的字体尺寸大致在 12 - 14px 之间，当你试图定义一个高度小于这个默认 值的 div 的时候， IE 会固执的认为这个层的高度不应该小于字体的行高。所以即使你用 height: 6px; 来定义了一个 div 的高度，实际在 IE 下显示的仍然是一个 12 px 左右高 度的层。 要解决这个问题，可以强制定义该 div 的字体尺寸，或者定义 overflow 属性来限制 div 高度的自动调整。

用以上的方法都可以阻止 IE 的自作聪明。

2、标签的 alt 属性，在 IE 中，alt 属性相当于 title 属性，鼠标悬浮于上时才会显 示的提示信息。

在 firefox 中 alt 则是图片不存在时显示的替代文字，其它 chrome、opera、 safari 则不支持 alt 属性，所以尽量用 title 来表现提示信息。

3、FF下给div设臵 padding 后会导致width和height增加, 但IE不会.(可用CSSHacker 解决)。

4、 （1）. 垂 直 居 中 。将 line-height 设臵为 当 前 div 相 同 的 高 度 , 再 通 过vertical-align: middle;.( 注意内容不要换行.)；

（ 2）.水平居中。 主要的样式定义如下：

说明： 首先在父级元素定义text-align: center;这个的意思就是在父级元素内的内容居中；对 于 IE 这样设定就已经可以了。但在 mozilla 中不能居中。解决办法就是在子元素定义时候设 定时再加上“margin-right: auto;margin-left: auto; ” 需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个 DIV 里，你 可以依次拆出多个 div，只要在每个拆出的 div 里定义margin-right: auto;margin-left: auto; 就可以了。

5、若需给 a 标签内内容加上 样式, 需要设臵 display: block;(常见于导航标签)。

6、ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要 的麻烦. (常见于导航标签和内容列表)。

7、.作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高 度自适应。

8、关于手形光标. 应当使用cursor: pointer; cursor: hand 只适用于 IE。

9、浮动 IE 产生的双倍距离#box{ float:left; width:100px; margin:0 0 0 100px;}//这种情况之下 IE 会产生 200px 的距离 display:inline; //使浮动忽略。

这里细说一下 block,inline 两个元素,Block 元素的特点是:总是在新行上开始,高度,宽 度,行高,边距都可以控制(块元素);Inline 元素的特点是:和其他元素在同一行上,„不可控 制(内嵌元素); #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一 行排列的的效果 diplay:table;

三、CSS Hacker

由于不同的浏览器对 CSS 的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的 CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

类内部Hack：比如 IE6 能识别下划线"_"和星号" * "，IE7 能识别星号" * "，但不能 识别下划线"_"，而 firefox 两个都不能认识。

选择器 Hack：比如 IE6 能识别*html .class{}，IE7 能识别*+html .class{}或者 *:first-child+html .class{}。

HTML 头 部 引 用 (if IE)Hack ：

针 对 所 有 IE ：

针对 IE6 及以下版本：

这类 Hack 不仅对 CSS 生效，对写在判断语句里面的所有代码都会生效。 IE、Firefox、Opera 和 Safari 对 CSS 样式 important 和*的支持 1、IE6、IE7 都支持 *，但 IE8 终于回归正统，放弃了对*的支持 2、IE7、IE8、Firefox、Opera、Safari 都支持 important 顾名，important 的优先级要高. 举例说明：

IE6 选择最后一个，即：background-color:#000000; （因为 IE6 对 important 不感冒）

IE7 选择第二个，即：background-color:#000000;（因为 IE7 开始对 important 感冒了， 同时还死守着它对 * 感情的最后一版本，但 important并未起到优先级的作用）

IE8 和 Firefox、Opera、Safari 选择第一个，即：background-color:#FF0000 !important;（IE8 完全感冒于 important，同时丢弃了对*的感情）

另外再补充一个，下划线”_“, IE6 支持下划线，IE7、IE8 和 Firefox、Opera、Safari 均不支持下划线。 浏览器优先级别:FF<IE7<IE6,CSS Hack 书写顺序一般为FF、IE7、IE6

四、JS兼容

1、Firefox 中不支持 document.all,尽量使用 document.getElementById("idName")获取 控件对象。

2、Firefox 的 JS 引擎无法识别 innerText，只支持 innerHTML。

3、获取窗口高度宽度：首先需要确认网页的文档声明，即 document.compatMode，可以用 来判断当前页面采用的渲染方式。下面官方文档的说明：

BackCompat：标准兼容模式关闭。

CSS1Compat：标准兼容模式开启。

当 document.compatMode 等 于 BackCompat 时 ， 浏 览 器 客 户 区 宽 度document.body.clientWidth； 当 document.compatMode 等 于 CSS1Compat 时 ， 浏 览 器 客 户 区 宽 度 是document.documentElement.clientWidth。

浏览器客户区高度、滚动条高度、滚动条的 Left、滚动条的 Top 等等都是上面的情况。

兼容代码如下：

4、js 设 臵 对 象 高 度 时 采 用document.getElementById("idName").style.height = 100+"px";

获取对象高度时使用 var height=document.getElementById("idName").offsetheight;

5、firefox 中无 insertAdjacentElement(sWhere , oElement)方法，对应的解决方法 ：

释义：insertAdjacentElement() 方法将一个给定的元素节点插入到相对于被调用的元素的给定的一个位置。

"beforeBegin": this.parentNode.insertBefore(parsedNode,this);

"afterBegin": this.insertBefore(parsedNode,this.firstChild);

"beforeEnd": this.appendChild(parsedNode);

"afterEnd": if(this.nextSibling) this.parentNode.insertBefore(parsedNode,this.nextSibling); else this.parentNode.appendChild(parsedNode);

6、js 获取年份应该用 new Date().getFullYear(),IE 用 getYear()可以获取但是 ff 中 getYear()获取的是自 1900 年起第几年。

7、event 。IE 下可直接利用 window.event 获取 event 对象， ff 中 有 两 种 方 法 ，

第 一 种 通 过 给 函 数 传 递 的 event 对 象 ， 如 onclick=dosomething(event)

第二种 var ev=arguments.callee.caller.arguments[0]

IE、ff 通用的方法即为 var event = window.event || arguments.callee.caller.arguments[0];

8、获取事件源对象，如获取用户点击的控件对象：

var inputObj = event.srcElement || event.target;

alert(inputObj .tagName);

其中 srcElement 为 IE 方法、target 为 ff 方法。 不 过 最 好 在 调 用 函 数 的 时 候 就 把 控 件 对 象 作 为 参 数 传 递 过 去 , 如 ：

9、获取页面中 frame 里的元素，有两种方法：

第一种方法：

window.frames["frameName"].document.getElementById("inputID") ；

第二种方法：

document.getElementById("frameID").contentWindow.document.getElementById("inputID");

推 荐 使 用 第二种方法。 获取 IFRAME 元素内页面的 document 对象，且对于在文档树中移动位臵 后的 iframe 元素也有很好的兼容性。同时应避免对跨域的父子页面交互。

10、.仅 IE 和 Chrome 支持 window.execScript 方法，其他浏览器不支持。IE 和 Chrome 对于此方法中语言类型参数的支持也存在差异，需谨慎使用。 若需要在其他不支持 window.execScript 方法的浏览器中达到类似的效果，可以使用 window.eval 方法：

注：本文章是作者在阅读“东软集团”《浏览器兼容分析》后所整理出来的笔记。仅供个人参考，转载请告之。