浏览器常见兼容问题汇总

2018年3月24日11:48:58 发表评论 45

浏览器兼容问题最多的是IE低版本浏览器,现在一般做到IE7就OK了。

三个方面做兼容

  1. HTML以及CSS样式
  2. HTML5和CSS3新特性
  3. JS脚本一些方法的支持

CSS样式兼容

  • IE浏览器图片加链接,会自动加边框

    设置img{border:none或0}解决

  • 浏览器间的标签内外边距不同

    给标签设置{margin:0,padding:0}

  • opacity定义元素透明度

    IE:filter: alpha(opacity=80);
    其它:opacity:0.8

  • 块级元素浮动后,有横行的margin

    块级浮动元素加display:inline

  • 设置较小高度时,会走出自身设置的高度

    给元素设置overflow:hidden

  • img并列时,默认有间距

    使用float属性给img布局

** CSS Hack **

  1. 条件注释法:

  1. 类内属性前缀法+选择器前缀法:

IE9以下版本兼容HTML5

使用菜鸟的静态资源html5shiv包,使用条件注释法引入包:

并且初始化标签样式:

  • 块属性标签float后,有横行的margin

    在设置float属性的元素里加display:inline+talbe

  • 设置10px以内的高度会超出原本设置的高

    给超出高度的标签设置overflow:hidden

  • 图片默认有间距

    几个img标签放在一起,有些浏览器会有默认的间距,使用float布局即可

JS脚本兼容

  • 事件对象

    任何一个对象触发事件,都传一个参数(event)
    IE默认是:window.event,其它:必须传递一个参数
    兼容方法:even = event || window.event;

  • 事件对象中的属性

    IE下,even对象有x,y属性,但是没有pageX,pageY属性;
    非IE下,event对象有pageX,pageY属性,但是没有x,y属性
    兼容方法:使用注释法或者三元表达式:var x = (event.x ? event.x : event.pageX)

  • innerHTML、innerText、textContent

    IE支持innerHTML、innerText,不支持textContent属性
    其他浏览器三种属性都支持

  • 获取页面内所有元素的一个集合

    IE:docuemnt.all
    非IE:document.getElementsByTagName('*');

  • 获取对象的可视化区域的宽和高,滚动条距离顶端的距离

    var w = document.body.clientWidth || document.documentElement.clientWidth;
    var t = document.body.scrollTop || document.documentElement.scrollTop;

  • window.localtion.href问题

    IE或者Firefox2.0.x下,可以使用window.location或window.location.href;
    Firefox1.5.x下,只能使用window.location.
    统一使用window.location

这里只整理了一些常遇到的浏览器兼容问题,后续遇到会慢慢添加。

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: