浏览器兼容问题解决方案

一，前言

不同的浏览器的内核也不尽相同，所以各个浏览器对网页的解析也存在这一些差异

浏览为内核主要分为两种，一是渲染引擎，另一个是js引擎，内核更加倾向于渲染引擎

常见浏览器内核： 

 IE浏览器  : trident内核
 Chrome浏览器：Webkit,现在是Blink

 Firefox 浏览器：Gecko

 Safari浏览器：Webkit

 Opera:最初是自己的Presto内核，后来加入谷歌大军，从webkit到Bink内核

 360浏览器，猎豹浏览器：IE + Chrome双内核

不同的浏览器的默认样式存在差异，可以使用 Normalize.css 抹平这些差异

Normalize.css 的作用

1.不同的浏览器在对于CSS没有定义的一些样式属性是不一样的

2.比如没有在自己的CSS里面规定超链接有没有下划线的时候，有些浏览器有，有些浏览器没有

3.再比如有一些浏览器规定的超链接默认颜色是蓝色，有一些又是黑色

4.而这个CSS的功能就是对几乎所有的默认样式进行重置，让所有的浏览器上对于未定义的样式浏览效果达到一致

5.当然如果你自己的CSS已经对默认样式进行了重置，不使用它也是可以的

github地址：https://github.com/necolas/normalize.css

二，常见解决方案

2.1 不同的浏览器的标签默认的外补丁和内补丁的不同

    问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差距较大

   解决方案: CSS里设置  *{margin:0;padding:0}

   备注：这个是最常见的也是最容易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0，

2.2 块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

   问题：常见症状是IE6 中后面的一块被顶到下一行

   解决方案：在float的标签样式控制中加入display:inline,将其转化成行内属性

2.3 图片默认有间距

问题：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了 通配符 不起作用

解决方案：使用float属性为Img布局

备注：因为日img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行，但是部分浏览器img标签会有个间距， 

2.4 标签min-height 不兼容

问题：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height 时不能很好的被各个浏览器兼容

解决方案：如果我们要设置一个标签的最小高度是2wrap:br00px,需要进行的设置为：{ min-height:200px; height:auto !important; height:200px;overflow:visible}

2.5 cursor:hand 显示手型在safari上不支持

解决方案： 统一使用 cursor:pointer

2.6 td自动换行问题

问题：table宽度固定，td自动换行

解决方案： 设置table 为 table-layout:fixed, td 为 word-wrap:break-word

2.7浏览器窗口大小兼容写法

// 浏览器窗口可视区域大小（不包括工具栏和滚动条等边线）
// 1600 * 525
var client_w = document.documentElement.clientWidth || document.body.clientWidth;
var client_h = document.documentElement.clientHeight || document.body.clientHeight;

// 网页内容实际宽高（包括工具栏和滚动条等边线）
// 1600 * 8
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;

// 网页内容实际宽高 (不包括工具栏和滚动条等边线）
// 1600 * 8
var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;

// 滚动的高度
var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;

2.8 ES6兼容性问题

Babel 只能默认转换新的js 语法（如箭头函数），而不转换新的API等新的对象或者方法，解决方案是用 babel-polyfill 来进行转换