浏览器兼容问题

现在国内常见的浏览器有：IE、Firefox、Safari、Opera、Google Chome、QQ浏览器、搜狗浏览器、百度浏览器、猎豹浏览器、UC浏览器、360浏览器、遨游浏览器、世界之窗浏览器等等。但目前最为主流浏览器有五大款，分别是IE、Firefox、Google Chrome、Safari、Opera。

浏览器最重要的部分是浏览器的内核。浏览器内核是浏览器的核心，也称“渲染引擎”，用来解释网页语法并渲染到网页上。浏览器内核决定了浏览器该如何显示网页内容以及页面的格式信息。不同的浏览器内核对网页的语法解释也不同，因此网页开发者需要在不同内核的浏览器中测试网页的渲染效果。

四大内核：

1、Trident内核，也称IE内核。

2、Webkit内核。

3、Gecko内核。

4、Presto内核。

各浏览器所用内核：

1、IE浏览器内核：Trident内核，也是俗称的IE内核；
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
4、Safari浏览器内核：Webkit内核；
5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；
7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
8、百度浏览器、世界之窗内核：IE内核； 　　
9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

浏览器兼容共有三大方面(几乎都是针对IE低版本进行兼容处理)：

• HTML兼容
• CSS兼容
• JS兼容

HTML兼容

1） 高版本的浏览器用了低版本的浏览器无法识别的元素，从而导致不能解析。主要体现在html5的新标签上。

解决方法：htmlshim框架可以让低于IE9的浏览器支持html5

2）img的alt属性，在图片不存在的情况下，各浏览器的解析不一致。

在chrome下显示的是一张破损的图片，在ff下显示的是alt的文字，而在IE中显示的是破损的图片加文字。

3）ul标签内外边距问题

ul标签在IE6\IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距

CSS兼容

• 样式在各浏览器中解析不一致的情况，或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.

• CSS Hack: CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法，修补bug的方法

• Filter:表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，Filter是hack方法中的一种；

1 ) 默认高度（IE6）
描述：在IE6及以下版本中，部分块元素拥有默认高度（低于18px高度）
hack1:给元素添加声明：font-size:0;
hack2：给元素添加声明：overflow:hidden;

2 ) 图片间隙
div中的图片间隙
bug：在块元素中插入图块状元素片时，有时图片会将块元素下方撑大三像素。
Hack：给< img >添加声明：display:block;

3 ) 双倍浮向（双倍边距）
描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边的边界加倍显示。
hack:给浮动元素添加声明：display:inline;

4 ) 表单元素行高不一致(IE,MOZ,C,O,S)
bug：表单元素行高对齐方式不一致
hack:给表单元素添加声明：float:left;

5 ) 按钮元素默认大小及样式不一 致
hack1： 统一大小及样式/（用a标记模拟）
hack2:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可

6 ) 百分比bug
描述：在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。
hack:给右面的浮动元素添加声明：clear:right; 意思：清除右浮动。
clear:left:清除左浮动
clear:both:清除两边的浮动

7 ) 鼠标指针bug
描述：cursor属性的hand属性值只有IE8浏览器识别;
hack:如统一某元素鼠标指针形状为手型，应添加声明：cursor:pointer;

8 ) 透明属性
IE浏览器写法：filter:alpha(opacity=数值);取值范围 1-100(IE8以下)
兼容其他浏览器写法：opacity:数值;(数值的取值范围0-1,0.1,0.2,0.3-----0.9)

9 ) 当li里的A加display:block或float:left时，出现行高不一致，有的会多出3像素；
hack1：给a加display：inline-block；
hack2：给a加display：inline;
Hack3：给li加float，并加宽度；

10 ) 当li加float属性，并且li里的A转换成块元素,并给a加了高度时，IE6里会出现每个LI单独占一行或阶梯状的情况；
hack1：不给a标签加高度；
Hack2：给a标签也添加float；

11)父元素里有块元素，如果给子元素添加添加margin-top,父元素会下来。
Hack1：给父元素添加overflow：hidden；
Hack2：给子元素添加float；
Hack3：给父元素加边框；
或者用其他的方法达到我们想要的效果：如给父元素加padding-top.

Fliter（过滤器）方法兼容浏览器
(1)、_下划线：IE6浏览器的兼容符号； （只有IE6浏览器识别此符号，其他浏览器不识别）
语法：选择器｛_属性：属性值；｝

(2)、*或+：兼容所有IE7以下浏览器；（只有IE7及以下版本浏览器识别此符号，其他浏览器不识别）
语法：选择器｛*属性：属性值; +属性：属性值; ｝

(3)、\0：IE8及以上浏览器的兼容符号；
语法：选择器｛属性：属性值\0;｝

(4)、\9：兼容所有IE浏览器；
语法：选择器｛属性：属性值\9｝（只有IE浏览器识别此符号，其他浏览器不识别）

JS兼容

1 ) 浏览器宽高问题

var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽
var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//网页可见区域宽
//以上为不包括边框的宽高，如果是offsetWidth或者offsetHeight的话包括边框
    
var winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth;//整个网页的宽
var winHH=document.body.scrollHeight||document.docuemntElement.scrollHeight;//整个网页的高

var scrollHeight=document.body.scrollTop||document.docuemntElement.scrollTop;//网页被卷去的高
var scrollLeft=document.body.scrollLeft||document.docuemntElement.scrollLeft;//网页左卷的距离

2 ) Event事件问题

document.onclick=function(ev){//谷歌火狐的写法，IE9以上支持，往下不支持；
        var e=ev;
        console.log(e);
    }
    document.onclick=function(){//谷歌和IE支持，火狐不支持；
        var e=event;
        console.log(e);
    }
    document.onclick=function(ev){//兼容写法；
        var e=ev||window.event;
        var mouseX=e.clientX;//鼠标X轴的坐标
        var mouseY=e.clientY;//鼠标Y轴的坐标
    }

3 ） DOM节点相关问题

function nextnode(obj){//获取下一个兄弟节点
        if (obj.nextElementSibling) {
            return obj.nextElementSibling;
        } else{
            return obj.nextSibling;
        };
    }
    function prenode(obj){//获取上一个兄弟节点
        if (obj.previousElementSibling) {
            return obj.previousElementSibling;
        } else{
            return obj.previousSibling;
        };
    }
    function firstnode(obj){//获取第一个子节点
        if (obj.firstElementChild) {
            return obj.firstElementChild;//非IE678支持
        } else{
            return obj.firstChild;//IE678支持
        };
    }
    function lastnode(obj){//获取最后一个子节点
        if (obj.lastElementChild) {
            return obj.lastElementChild;//非IE678支持
        } else{
            return obj.lastChild;//IE678支持
        };
    }

4 ) 获取元素的非行间样式值

function getStyle(object,oCss) {
             if (object.currentStyle) {
                 return object.currentStyle[oCss];//IE
             }else{
                 return getComputedStyle(object,null)[oCss];//除了IE
             }
     }

5 ) 设置监听事件

function addEvent(obj,type,fn){//添加事件监听，三个参数分别为 对象、事件类型、事件处理函数，默认为false
        if (obj.addEventListener) {
            obj.addEventListener(type,fn,false);//非IE
        } else{
            obj.attachEvent('on'+type,fn);//ie,这里已经加上on，传参的时候注意不要重复加了
        };
    }
    function removeEvent(obj,type,fn){//删除事件监听
        if (obj.removeEventListener) {
            obj.removeEventListener(type,fn,false);//非IE
        } else{
            obj.detachEvent('on'+type,fn);//ie，这里已经加上on，传参的时候注意不要重复加了
        };
    }

6 ) 阻止事件传播

document.onclick=function(e){
        var e=e||window.event;
        if (e.stopPropagation) {
            e.stopPropagation();//W3C标准
        }else{
            e.cancelBubble=true;//IE....
        }
    }

7 ) 阻止默认事件

 document.onclick=function(e){
        var e=e||window.event;
        if (e.preventDefault) {
            e.preventDefault();//W3C标准
        }else{
            e.returnValue='false';//IE..
        }
    }

8 ) 获取事件源

 document.onmouseover=function(e){
        var e=e||window.event;
        var Target=e.target||e.srcElement;//获取target的兼容写法，后面的为IE
        var from=e.relatedTarget||e.formElement;//鼠标来的地方，同样后面的为IE...
        var to=e.relatedTarget||e.toElement;//鼠标去的地方
    }