浏览器常见兼容问题汇总

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

浏览器兼容问题最多的是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. 条件注释法:
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
  1. 类内属性前缀法+选择器前缀法:
“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效,是IE9/10的hack
*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

IE9以下版本兼容HTML5

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

<!--[if It IE 9]>
      <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js ">
      </script>
<![end if]-->

并且初始化标签样式:

article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
  • 块属性标签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: