【浏览器兼容性】浏览器兼容性问题

一、常见的浏览器内核

常见的浏览器内核可以分四种:Trident、Gecko、Blink、Webkit

【浏览器兼容性】浏览器兼容性问题_第1张图片

二、常见的兼容性问题

1、html 兼容性问题

问题:HTML5新的语义标签在低版本的老IE浏览器中存在兼容性问题

解决方案:引用第三方解析库


2、css 兼容性问题

(1)常见问题

问题一:不同浏览器的标签默认的外补丁和内补丁不同

  • 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大
  • 解决方案:css里 *{margin:0;padding:0;}
  • 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的css文件开头都会用通配符*来设置各个标签的内外补丁是0

问题二:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大

  • 问题症状:常见症状是ie6中后面的一块被顶到下一行
  • 解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性
  • 备注:我们最常用的就是div+css布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。

问题三:设置较小高度标签(一般小于10px),在ie6,ie7,遨游中高度超出自己设置高度

  • 问题症状:ie6、7和遨游里这个标签的高度不受控制,超出自己设置的高度
  • 解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
  • 备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高

问题四:行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,ie6间距bug(类似第二种)

  • 问题症状:ie6里的间距比超过设置的间距
  • 解决方案:在display:block;后面加入display:inline;display:table;
  • 备注:行内属性标签,为了设置宽高,我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后,在ie6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:table。

问题五:图片默认有间距

  • 问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加上问题一中提到的通配符也不起作用。
  • 解决方案:使用float属性为img布局
  • 备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道

问题六:标签最低高度设置min-height不兼容

  • 问题症状:因为min-height本身就是一个不兼容的css属性,所以设置min-height时不能很好的被各个浏览器兼容
  • 解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}
  • 备注:在B/S系统前端开发时,有很多情况下我们有这种需求。当内容小于一个值(如300px)时。容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。

问题七:透明度的兼容css设置

  • 问题症状:IE9以下浏览器不能使用opacity
  • 解决方案:opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

问题八:IE6下div高度无法小于10px

  • 问题症状:比如定义一条高2px的线条,FF和IE7都正常,但IE6就是10px
  • 解决方案:添加overflow属性或设置fontsize大小为高度大小。如:
 

问题九:鼠标的手势也有问题

  • 问题症状:FireFox的cursor属性不支持hand,但是支持pointer,IE两个都支持
  • 解决方案:统一使用cursor:pointer

问题十:chrome下默认会将小于12px的文本强制按照12px来解析

  • 解决方案:添加属性
-webkit-text-size-adjust: none; 

(2)css hack

我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样式,所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做 CSS hack.

CSS hack主要有三种:IE条件注释法、CSS属性前缀法、选择器前缀法。

1、IE条件注释法,即在正常代码之外添加判别IE浏览器或对应版本的条件注释,符合条件的浏览器或者版本号才会执行里边的代码。








2、CSS属性前缀法,即是给css的属性添加前缀。比如 * 可以被IE6/IE7识别,但 _ 只能被IE6识别,IE6-IE10都可以识别 "\9",IE6不能识别!important FireFox不能识别 * _ \9

/* CSS属性级Hack */ 
color:red; /* 所有浏览器可识别*/

_color:red; /* 仅IE6 识别 */

*color:red; /* IE6、IE7 识别 */

+color:red; /* IE6、IE7 识别 */

*+color:red; /* IE6、IE7 识别 */

[color:red; /* IE6、IE7 识别 */ 

color:red\9; /* IE6、IE7、IE8、IE9 识别 */

color:red\0; /* IE8、IE9 识别*/

color:red\9\0; /* 仅IE9识别 */

color:red \0; /* 仅IE9识别 */

color:red!important; /* IE6 不识别!important 有危险*/

说明:在标准模式中

  • “-″减号是IE6专有的hack
  • “\9″ IE6/IE7/IE8/IE9/IE10都生效
  • \0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
  • “\9\0″ 只对IE9/IE10生效,是IE9/10的hack

3、选择器前缀法,顾名思义,就是给选择器加上前缀。

*html #demo { color:red;} /* 仅IE6 识别 */

*+html #demo { color:red;} /* 仅IE7 识别 */

body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 
*/ 
head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */

:root #demo { color:red\9; } : /* 仅IE9识别 */

(3)css reset

CSS Reset,意为重置默认样式。HTML中绝大部分标签元素在网页显示中都有一个默认属性值,通常为了避免重复定义元素样式,需要进行重置默认样式(CSS Reset)

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
    body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
    h1, h2, h3, h4, h5, h6{ font-size:100%; }
    address, cite, dfn, em, var { font-style:normal; }
    code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
    small{ font-size:12px; }
    ul, ol { list-style:none; }
    a { text-decoration:none; }
    a:hover { text-decoration:underline; }
    sup { vertical-align:text-top; }
    sub{ vertical-align:text-bottom; }
    legend { color:#000; }
    fieldset, img { border:0; }
    button, input, select, textarea { font-size:100%; }
    table { border-collapse:collapse; border-spacing:0; }

3、javascript 兼容性问题

(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;//网页左卷的距离

var screenH=window.screen.height;//屏幕分辨率的高
var screenW=window.screen.width;//屏幕分辨率的宽
var screenX=window.screenLeft;//浏览器窗口相对于屏幕的x坐标(除了FireFox)
var screenXX=window.screenX;//FireFox相对于屏幕的X坐标
var screenY=window.screenTop;//浏览器窗口相对于屏幕的y坐标(除了FireFox)
var screenYY=window.screenY;//FireFox相对于屏幕的y坐标

(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节点相关的问题

//DOM节点相关,主要兼容IE 6 7 8
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)document.getElementsByClassName问题

//通过类名获取元素
document.getElementsByClassName('');//IE 6 7 8不支持;

//这里可以定义一个函数来解决兼容问题,当然别在这给我提jQuery...
//第一个为全局获取类名,第二个为局部获取类名
function byClass1(oClass){//全局获取,oClass为你想要查找的类名,没有“.”
    var tags=document.all?document.all:document.getElementsByTagName('*');
    var arr=[];
    for (var i = 0; i < tags.length; i++) {
        var reg=new RegExp('\\b'+oClass+'\\b','g');
        if (reg.test(tags[i].className)) {
            arr.push(tags[i]);
        };
    };
    return arr;//注意返回的也是数组,包含你传入的class所有元素;
}

function byClass2(parentID,oClass){//局部获取类名,parentID为你传入的父级ID
    var parent=document.getElementById(parentID);
    var tags=parent.all?parent.all:parent.getElementsByTagName('*');
    var arr=[];
    for (var i = 0; i < tags.length; i++) {
    var reg=new RegExp('\\b'+oClass+'\\b','g');
        if (reg.test(tags[i].className)) {
            arr.push(tags[i]);
        };
    };
    return arr;//注意返回的也是数组,包含你传入的class所有元素;
 }

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

//获取元素的非行间样式值
 function getStyle(object,oCss) {
         if (object.currentStyle) {
             return object.currentStyle[oCss];//IE
         }else{
             return getComputedStyle(object,null)[oCss];//除了IE
         }
 }

(6)设置监听事件

//设置监听事件
 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,传参的时候注意不要重复加了
    };
}

(7)元素到浏览器边缘的距离

//在这里加个元素到浏览器边缘的距离,很实用
function offsetTL(obj){//获取元素内容距离浏览器边框的距离(含边框)
    var ofL=0,ofT=0;
    while(obj){
        ofL+=obj.offsetLeft+obj.clientLeft;
        ofT+=obj.offsetTop+obj.clientTop;
        obj=obj.offsetParent;
    }
    return{left:ofL,top:ofT};
}

(8)阻止事件传播

//js阻止事件传播,这里使用click事件为例
document.onclick=function(e){
    var e=e||window.event;
    if (e.stopPropagation) {
        e.stopPropagation();//W3C标准
    }else{
        e.cancelBubble=true;//IE....
    }
}

(9)阻止默认事件

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

(10)关于EVENT事件中的target

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

(11) 鼠标滚轮滚动事件

//鼠标滚轮事件
//火狐中的滚轮事件
document.addEventListener("DOMMouseScroll",function(event){
    alert(event.detail);//若前滚的话为 -3,后滚的话为 3
},false)
//非火狐中的滚轮事件
document.onmousewheel=function(event){
    alert(event.detail);//前滚:120,后滚:-120
}

三、常见的浏览器调优方法:

优化原则:

  • dns是否通过缓存减少查询时间
  • 网络请求走最近的网络环境
  • 相同的静态资源缓存
  • 减小请求的大小
  • 服务端渲染优化

1、减少http请求,合理设置 HTTP缓存

http协议是无状态的应用层协议,意味着每次http请求都需要建立通信链路、进行数据传输,而在服务器端,每个http都需要启动独立的线程去处理。这些通信和服务的开销都很昂贵,减少http请求的数目可有效提高访问性能。

减少http的主要手段是合并CSS、合并javascript、合并图片。将浏览器一次访问需要的javascript和CSS合并成一个文件,这样浏览器就只需要一次请求。图片也可以合并,多张图片合并成一张,如果每张图片都有不同的超链接,可通过CSS偏移响应鼠标点击操作,构造不同的URL。

  • 简单的图片效果可以使用html+css、canvas或者svg来替换。
  • 合并CSS、合并javascript、合并图片(webpack等包管理工具)
  • 图片格式,大小选择,图片优化

2、应用浏览器缓存

  • http缓存(文件级缓存)


  • cookie: 储存在用户本地终端上的数据(通常经过加密)有长度和个数限制,浏览器端也可以通过document.cookie来获取cookie,并通过js浏览器端也可以方便地读取/设置cookie的值。
  • localStorage: localStorage是html5的一种新的本地缓存方案,目前用的比较多,一般用来存储ajax返回的数据,加快下次页面打开时的渲染速度。localStorage大小有限制,不适合存放过多的数据,如果数据存放超过最大限制会报错,并移除最先保存的数据。localStorage存储的数据是不能跨浏览器共用的,一个浏览器只能读取各自浏览器的数据

localStorage核心API

localStorage.setItem(key, value) //设置记录
localStorage.getItem(key) //获取记录
localStorage.removeItem(key) //删除该域名下单条记录
localStorage.clear() //删除该域名下所有记录

注:localStorage对象的属性值只能是字符串,json对象可以借助JSON类,将对象转换成字符串保存,然后在取出来的时候将json字符串转换成真正可用的json对象格式。

  • sessionStorage:
    sessionStorage和localstorage类似,但是浏览器关闭则会全部删除,api和localStorage相同,实际项目中使用较少。
  • application cache
    application cahce是将大部分图片资源、js、css等静态资源放在manifest文件配置中。当页面打开时通过manifest文件来读取本地文件或是请求服务器文件。

3、启用压缩

在服务器端对文件进行压缩,在浏览器端对文件解压缩,可有效减少通信传输的数据量。如果可以的话,尽可能的将外部的脚本、样式进行合并,多个合为一个。文本文件的压缩效率可达到80%以上,因此HTML、CSS、javascript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力,在通信带宽良好,而服务器资源不足的情况下要权衡考虑。

采用网上在线压缩工具(jQuery MiniUI)自己压缩或者通过webpack、gulp等打包工具进行压缩处理。

4、CSS Sprites

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。

CSS Sprites为一些大型的网站节约了带宽, 提高了用户的加载速度和用户体验,不需要加载更多的图片

5、LazyLoad Images

对于图片而言,在页面刚加载的时候可以只加载第一屏,当用户继续往后滚屏的时候才加载后续的图片。

  • jqueryLazyload方式
  • echo.js方式

6、CSS放在页面最上部,javascript放在页面最下面

head 内的 JavaScript 需要执行结束才开始渲染 body,所以尽量不要将 JS 文件放在 head 内。可以选择在 document complete 时,或者特定区块后引入和执行 JavaScript。而 CSS 应当写在 head 中,以避免页面元素由于样式缺失造成瞬间的白页或者给用户闪烁感。

 

你可能感兴趣的:(前端)