什么是浏览器的兼容性
浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。所以在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。

浏览器的兼容性无非还是样式兼容性（css），交互兼容性（javascript），浏览器 hack 三个方面

样式兼容性(css)

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

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

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

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

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

6.父元素里有块元素，如果给子元素添加添加margin-top,父元素会“掉”下来（高度塌陷）
hack1：给父元素添加overflow：hidden；
hack2：给子元素添加float；
hack3：给父元素加边框；
或者用其他的方法达到我们想要的效果：如给父元素加padding-top

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

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

9.万能清除浮动法
父元素选择符:after{content:"."; clear:both; display:block; height:0; overflow:hidden; visibility:hidden;}

10.行内块元素之间空白缝隙的问题
hack1：利用margin 负值，例如Margin-left:-8px;
hack2：把行内块写到一行上去
hack3：给父盒子加:font-size:0;

交互兼容性

1、event事件
通用方式
document.onclick=function(e){
    var e = e || window.event;   //兼容写法
}

2、一些“方法”的兼容性写法
停止事件传播
if(evt.stopPropagation){
    return evt.stopPropagation();    //一定不能漏下evt  方法前一定要写明对象
}else{
    return evt.cancelbuble();
}

阻止默认事件
if (e.preventDefault) {
     e.preventDefault();   //W3C标准
}else{
     e.returnValue = 'false';    //IE
}

获取第一个子节点（next，last都类似）
if (obj.lastElementChild) {
     return obj.firstElementChild;   //非IE6/7/8支持
} else{
     return obj.firstChild;   //IE6/7/8支持
};

设置监听事件
//参数一：对象
//参数二：事件类型
//参数三：事件处理函数
function addEvent(obj, type, fn){
     if (obj.addEventListener) {
          obj.addEventListener(type, fn, false);  //非IE
     } else{
          obj.attachEvent('on' + type, fn);  //IE
     }
}

3、通过className获取DOM节点
function getClassName(xxx){
     var atag = document.all ? document.all : document.getElementsByTagName('*');
     var arr = [];
     for (var i = 0; i < atag.length; i++) {
         var reg = new RegExp('\\b' + xxx + '\\b', 'g');
         if (reg.test(atag[i].className)) {
             arr.push(atag[i]);
         }
     }
     return arr;  //返回的也是数组，包含传入的class所有元素；
}

4、event.srcElement问题
IE：event对象有srcElement属性，没有target属性；
Firefox:even对象有target属性，没有srcElement属性。

srcObj = event.srcElement ? event.srcElement : event.target;

5、firefox与IE的父元素(parentElement)的区别
IE：obj.parentElement
firefox：obj.parentNode
hack：都使用obj.parentNode

移动端常见案例
1、部分情况下对非可点击元素如(label,span)监听click事件时，ios下不会触发
hack：css中增加cursor:pointer

2、底部输入框被键盘遮挡问题
var oheight = $(document).height(); //浏览器当前的高度
$(window).resize(function(){
     if($(document).height() < oheight){
          $("#footer").css("position", "static");
     }else{
          $("#footer").css("position", "absolute");
     }
});

3、CSS动画页面闪白,动画卡顿
//使用综合属性
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

4、阻止旋转屏幕时自动调整字体大小
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

5、预加载、自动播放无效
自动播放的有效性受操作系统、浏览器（webview）、版本等的影响，苹果官方规定必须由用户手动触发才会载入音频，所以可以在用户依次输入后，让音频实现预加载:
document.addEventListener('touchstart', function () {
     document.getElementsByTagName('audio')[0].play();
     document.getElementsByTagName('audio')[0].pause();
});

6、ios safari时间显示问题
设置new Date日期格式的时候，在ios中的safari中发现显示效果与其他浏览器不一致。
只识别：new Date("year/month/day");

7、移动端300ms延迟。
hack1：一般在移动端用tap事件来取代click事件
hack2：fastclick可以解决在手机上点击事件的300ms延迟

8、手机上的flex布局时会有兼容性问题
.box{
    display: -webkit-box;  //老版本语法: Safari, iOS, Android browser, older WebKit browsers. 
    display: -moz-box;     //老版本语法: Firefox (buggy) 
    display: -ms-flexbox;  //混合版本语法: IE 10 
    display: -webkit-flex; //新版本语法: Chrome 21+ 
    display: flex;         //新版本语法: Opera 12.1, Firefox 22+

浏览器hack

1、Firefox
@-moz-document url-prefix() { .selector { property: value; } }

上面是仅仅被Firefox浏览器识别的写法，具体如：
@-moz-document url-prefix() { .demo { color:lime; } }

支持Firefox的还有几种写法：
/* 支持所有firefox版本 */ #selector[id=selector] { property: value; } 
或者： @-moz-document url-prefix() { .selector { property: value; }  
/* 支持所有Gecko内核的浏览器 (包括Firefox) */ *>.selector { property: value; }

2、Webkit枘核浏览器(chrome and safari)
@media screen and (-webkit-min-device-pixel-ratio:0) { Selector { property: value; } }
/*上面写法主要是针对Webkit内核的浏览器，如Google Chrome 和 Safari浏览器：*/
@media screen and (-webkit-min-device-pixel-ratio:0) { .demo { color: #f36; } }

3、Opera浏览器
html:first-child>body Selector {property:value;}
/*或者：*/ @media all and (min-width:0) { Selector {property: value;} } 
/*或者：*/ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body Selector { property: value; } }
/*上面则是Opera浏览器的Hack写法：*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body .demo { background: green; } }

4、IE9浏览器
:root Selector {property: value9;}
/*上面是IE9的写法，具体应用如下：*/
:root .demo {color: #ff09;}

5、IE9以及IE9以下版本
Selector {property:value9;}
/*这种写法只有IE9以及IE9以下版本能识别，这里需要注意此处“9”只能是“9”不能是别的，比如说“8”，不然会失去效果的，如：*/

.demo {background: lime9;}

6、IE7浏览器
*+html Selector{property:value;} 或 *:first-child+html Selector {property:value;}
/*上面两种是IE7浏览器下才能识别，如：*/
*+html .demo {background: green;} 或者： *:first-child+html .demo {background: green;}

7、IE7及IE7以下版本浏览器
Selector {*property: value;}
/*上面的写法在IE7以及其以下版本都可以识别，如：*/

.demo {*background: red;}

8、IE6浏览器
加_下划线即可

CSS选择器的Hack写法
下面我们主要来看CSS选择器和CSS属性选择器在不同浏览器的支持情况。下面先来看CSS选择器支持情况。
1、IE6以及IE6以下版本浏览器
* html .demo {color: green;}
* ```
2、仅仅IE7浏览器
```css
*:first-child+html .demo {color: green;}

3、除IE6之外的所有浏览器（IE7-9, Firefox,Safari,Opera）
html>body .demo {color: green;}

4、IE8-9,Firefox,Safari,Opear
html>/**/body .demo {color: green;}

5、IE9+
:root .demo {color: red;}

6、Firefox浏览器
@-moz-document url-prefix() { .demo { color: red; } }

7、Webkit内核浏览器（Safari和Google Chrome）
@media screen and (-webkit-min-device-pixel-ratio:0) { .demo { color: red; } }

8、Opera浏览器
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body .demo { color: red; } }

9、iPhone / mobile webkit
@media screen and (max-device-width: 480px) { .demo { color: red } }

CSS属性Hack写法
/*1、IE6浏览器*/
.demo {_color: red;}

/*2、IE6-7浏览器识别*/
.demo {*color: red;}

/*3、所有浏览器除IE6浏览外*/
.demo {color/**/:red;}

/*4、IE6-9浏览器*/
.demo {color: red9;}

/*5、IE7-8浏览器*/
.demo {color/***/:red9;}

IE条件注释，全部采用选择器Hack的写法。这种写法分两步：
1、创建条件样式表，并在HTML中body里添加相应的class类名：
<!–[if IE6]–><<!–[if IE7]–><!–[if IE8]–><!–[if IE9]–><!–[if !IE]–>

2、接着创建对应的样式
.demo {color: blue;}/*现代浏览器*/ 
.non-ie .demo {color: red;}/*除IE外浏览器*/ 
.ie9 .demo {color: yellow;}/*IE9浏览器*/ 
.ie8 .demo{color: green;}/*IE8浏览器*/ 
.ie7 .demo {color: orange;}/*IE7浏览器*/
.ie6 .demo {color: lime;}/*IE6浏览器*/ 
@media all and (min-width: 0px){ .demo {color:black;} /* webkit and opera */
@media screen and (-webkit-min-device-pixel-ratio:0){ .demo{color:#369;}/* webkit */ 
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body .demo{color:#cf6;}/* opera */ 
@-moz-document url-prefix(){ .demo{color:#963;}/* firefox * / 

浏览器兼容性解决之道

前言

      浏览器兼容性一直是前端开发中不得不面对的一个问题。而最突出的就是IE。对绝大多数公司来说，兼容IE6的性价比已经很低，而IE7则几乎已经绝迹。所以，常见的兼容性下限是IE8。这也正是Angular1.2x的兼容性目标，Angular团队声明：Angular的持续集成服务器会在IE8下运行所有的测试。但这些测试不会运行在IE7及以下版本，它们也不会保证Angular将会工作在这些IE版本上。

      而1.3以后的版本，Angular官方不再保证对IE8的兼容。当然，这并不表示一定不能在IE8用，但是官方不在针对IE8对集成测试，如果确实需要在兼容IE8的同时使用1.3，就需要自己做全面测试。不过，这样做的话性价比比较低。所以，在工程实践中，一般以IE8为分界，如果需要兼容，就用1.2，否则就用1.3+。

      在项目开发过程中，自己一直都是在Chrome浏览器中开发、调试服务端管理前台。后期测试阶段，Boss提出要做到主流浏览器(例如：360浏览器、qq浏览器、IE)兼容。这个要求还是很合理的。经过测试360、qq、UC、火狐等浏览器均不存在所谓的兼容性问题。最令人头大的就是IE。不过，我坚信:是问题就可以得到解决。

测试环境:

Angular版本 : angular-1.3.0.14

Jquery版本  ：jquery-1.9.1

浏览器版本    : IE10

解决

      初次尝试设置IE10的兼容性选项，无解。

      IE不兼容问题是程序中调用jquery，抢占了$的原因。解决方案如下:

1.JQuery方案

1.1 页面引入jquery.js库

<script src="jquery-1.7.1.js" type="text/javascript"></script>

1.2 添加两个js函数

添加LockTableHead()和translate()函数。

注意：为防止JQuery与现有js框架抢夺$标识符，要执行jQuery.noConflict()。

 

function LockTableHead(divId, tableId) {
var jq = jQuery.noConflict();
    jq("#" + divId).scroll(function () {
        var delta = jq("#" + divId).scrollTop();
        if (delta > 0) {
            translate(jq("#" + tableId +" th"), 0, delta - 2);
        }
        else {
            translate(jq("#" + tableId + " th"), 0, 0);
        }
    });
}
function translate(element, x, y) {
    var translation = "translate(" + x + "px," + y + "px)" 
    element.css({
        "transform": translation,
        "-ms-transform": translation,
        "-webkit-transform": translation,
        "-o-transform": translation,
        "-moz-transform": translation
    });
}

 

1.3 修改页面，调用js

在适当的地方添加LockTableHead()函数调用即可。如下：

<button οnclick="LockTableHead('grid','T000000');" name="b1" type="button">button</button>

注意：要提供一个div的id和table的id 。

2.非JQuery方案(纯js)

2.1 思路

受JQuery方案的启发，将它翻译回普通js即可。

2.2 添加js函数

添加LockTableHead()函数。

 

function LockTableHead(divId, tableId) {
document.getElementById(divId).onscroll = function () {
var delta = document.getElementById(divId).scrollTop;
var t1 = "translate(0px," + delta + "px)";
th_Array=document.getElementById(tableId).getElementsByTagName("th");
for (i = 0; i < th_Array.length; i++) {
th_Array[i].style["-ms-transform"] = t1;
}
};
}

 

2.3 修改页面，调用js

同上，在适当的地方添加LockTableHead()函数调用即可。如下：

<button οnclick="LockTableHead('grid','T000000');" name="b1" type="button">button</button>

注意：要提供一个div的id和table的id 。

3.总结

      以上两方案实际上都是使用了css3中的translate函数，这就意味着浏览器得支持这个功能是前提条件。

      另外，如果页面上只有一个table，也可以通过getElementsByTagName的方式定位table，并用parentNode的方式定位div，这样就不必传递它们的id了。

      以上方法貌似只是解决浏览器局部兼容性问题。对于全面兼容不适用。

      IE浏览器兼容性问题真的难倒自己了。始终找不到一个好的解决方案。错误提示如下:

  

      

      居然有个对象是没定义的？！

 

    Object.keys方法是ES5中的函数。IE8不支持。

      自己根据提示修改了lodash.js文件中的L083，L229,将其进行了注释。并引入了es5-shim.js文件。

      是否需要考虑一下浏览器的内核？

注：

      Google Chrome是采用Chrome内核，基于开源内核chromium。打开网页的速度快，且很安全，性能极佳，界面简洁，功能多，但兼容性有待提高。

      Internet Explorer是采用IE内核，打开网页的速度一般，安全性一般，但兼容性极高，界面简单，功能较少。

暂时搁置....欢迎能够解决此问题的朋友留言。

参考文献

1.http://www.cnblogs.com/ahl5esoft/p/3872597.html

2.http://blog.csdn.net/jumtre/article/details/50380311

3.http://www.jb51.net/article/52583.htm

4.http://www.jb51.net/article/45428.htm

美文美图

 

一、浏览器的内核

IE：trident内核

Firefox（火狐）：gecko内核

Chrome：Blink（基于Webkit）

Safari：Webkit内核

Oprea：现用Blink，以前是presto内核

二、CSS浏览器兼容性

-moz-   火狐

-o-        opera早期

-webkit-     谷歌、safari

-ms-    IE

三、JS浏览器兼容的写法

（参考博客：https://www.cnblogs.com/May-J-Wang/p/6995288.html）

浏览器兼容问题有很多，包括个浏览器元素查找问题、DOM操作以及事件。下面列举几种常见JS事件的兼容性写法。

1、js阻止默认事件

var e = event ? || window.event;  简写形式： var e=e || window.event;

//如果存在event,那么var e=event;如果不存在event，那么var e=window.event,为了实现多种浏览器兼容

//js阻止默认事件
document.onclick = function(e){
    var e = event ? || window.event;
    if(e.preventDefault){
        e.preventDefault();  //W3C标准
    } else {
        e.returnValue = fasle; //IE
    } 
}

2、阻止事件冒泡事件

//阻止冒泡事件
document.onclik = function(e){
    var e = e || window.event;
    if(e.stopPropagation){
        e.stopPropagation(); //W3C
    } else {
        e.cancelBlue = true;
    }
}

3、获取事件及事件对象目标

getEvent:function(e){
    return e || window.event;
};
getTarget:function(e){
    return e.target || event.srcElement;
};

 4、添加事件方法

//在标准浏览器中绑定事件
addHandler：function(element,type,handler){
    if(element.addEventListener){        //检测是否为DOM2级方法
        element.addEventListener(type, handler, false);
    }else if (element.attachEvent){      //检测是否为IE级方法
        element.attachEvent("on" + type, handler);
    } else {                            //检测是否为DOM0级方法
        element["on" + type] = handler;
    };
};

//解除事件绑定
removeHandler: function (element, type, handler) {
    if (element.removeEventListener()) {
       element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
       element.detachEvent("on" + type, handler);
    } else {
       element["on" + type] = null;
    }
}

 

浏览器兼容性测试
产生浏览器兼容性问题的原因：不同浏览器使用内核及所支持的html等网页语言标准同，以及客户端的环境不同（如分辨率不同）造成效果不能达到理想效果。
最常见的问题就是：网页元素位置混乱、错位
内核：决定浏览器如何显示网页的内容以及页面的格式信息
常见浏览器内核：
Ie内核：qq、搜狗、百度、360、世界之窗等
Webkit内核：Safari、Chrome 手机浏览器都是webkit内核
Gecko内核： 火狐浏览器（Firefox） it类用的多
Presto内核：opera浏览器
谷歌体积小、浏览网页速度快、安全性高、简洁
Firefox：多操作系统系统支持、兼容、速度快、全屏截图、firebug抓包等  
Ie8 ie9：微软自带
以下情况需做兼容性测试：1、网页浏览器兼容测试：用户需求、指定需求2、提高用户使用量等
兼容性测试内容：页面格式、字体、输入框、下拉框、复选框、按钮等-功能测试过程中同步做  例：2个测试人员如兼容多个浏览器，两位分浏览器做自己负责项目部分
问题1：用户反馈小众浏览器有问题，公司如何处理）-----换个做过兼容性测试的浏览器
问题2：如果一个网站分为前台访问系统、后台管理系统、是否都需要做兼容性测试？-----后台管理系统不会做兼容性测试
前台访问系统：用户访问地址
后台管理系统：工作人员管理地址
百度统计流量：https://tongji.baidu.com/data/browser
App兼容测试：也能看到数据参考
常用浏览器兼容测试工具：
A：ietester，容易崩溃
B:在虚拟机里面装不同版本的ie浏览器
C、https://app.crossbrowsertesting.com/login 支持不同系统不同版本浏览器兼容性测试，但免费时长不长，需要缴费测试
D、spoon browser sandbox 启动比较慢，需要注册使用 https://spoon.net/browsers/
回忆：测试计划---测试用例-----测试报告
如何编写测试计划：
包含内容：（5w+1h记忆法）：目的（why）、测试范围（what）、测试进度安排（when）、测试人员（who）、测试环境（where）、测试方法+测试工具（how）、风险评估、培训计划
测试报告（写过没有？包括什么内容？测试报告的重点是什么？---缺陷分析、测试结论）---禅道有bug分析
测试范围是根据需求规格说明书整理
每一个发布的版本都有一个测试报告
测试阶段：按测试版本统计