IE 兼容问题总结

https://wildye.cn/posts/8bd15521/

1. 获取滚动条位置

  • window.pageXOffsetwindow.pageYOffsetIE8及以下是不兼容的
  • document.body.scrollLeft 起作用时 document.documentElement.scrollLeft 失效,反之亦然
  • document.body.scrollTop 正常调用失效,需封装
// 兼容解决方案:
function getScrolloffset(){
  if(window.pageXOffset){
    return{
      x : window.pageXOffset,
      y : window.pageYOffset
    }
  }else{
    return{
      x : document.body.scrollLeft + document.documentElement.scrollLeft,
      y : document.body.scrollTop + document.documentElement.scrollTop
    }
  }
}

2. 获取视口(viewport)尺寸

document.compatMode:查看浏览器解析模式

// CSS1Compat 标准模式
document.documentElement.clientWidth
document.documentElement.clientHeight

// BackCompat 混杂模式
document.body.clientWidth
document.body.clientHeight
// 兼容解决方案:
function getViewport(){
  if (window.innerWidth) {
    return{
      x: window.pageXOffset,
      y: window.pageYOffset
    }
  }else{
    if(document.compatMode == "BackCompat"){
      return{
        w: document.body.clientWidth,
        h: document.body.clientHeight
      }
    }else{
      return{
        w: document.documentElement.clientWidth,
        h: document.documentElement.clientHeight
      }
    }
  }
}

3. 获取元素位置 IE8及以下缺失属性宽/高属性

el.getBoundingClientRect())                 // IE8及以下缺失 width 和 height 属性
console.log("Width:" + div.offsetWidth);;   // IE7以下不加边框尺寸
console.log("Height:" + div.offsetHeight);  // IE7以下不加边框尺寸
console.log("Left:" + div.offsetLeft);      // IE7及以上 OK
console.log("Top:" + div.offsetTop);        // IE7及以上 OK

clientWidthclientHeightscrollWidthscrollHeight

尺寸(有滚动条) = content + 3px;

尺寸(无滚动条) = content + padding * 2;

4. IE8 兼容 border-radius 属性方案

IE8及以下不支持 border-radius属性,如果要想在IE浏览器中实现圆角的效果

<!--[if lte IE 8]>
	<script src="PIE.js"></script>
<![endif]-->
  • less code
input {
  border: 1px solid #000;
  .ie8-border-radius(10px);
}

// 解决IE8不支持圆角
.ie8-border-radius(@size: 5px) {
  position: relative;
  z-index: 2;
  -moz-border-radius: @size;
  -webkit-border-radius: @size;
  border-radius: @size;
  behavior: url(PIC.htc); // 相对于html文件路径
}
  • IE 找 PIC.htc 文件是相对 html文件路径来找的
  • 需要有定位属性 position:relative 和较高的层级 z-index: 2
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值