一,前言
不同的浏览器的内核也不尽相同,所以各个浏览器对网页的解析也存在这一些差异
浏览为内核主要分为两种,一是渲染引擎,另一个是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 来进行转换