IE 兼容问题总结

桃扇骨 2022-05-29 11:12 257阅读 0赞

### 文章目录 ###

*   *  1. 获取滚动条位置
     *  2. 获取视口（viewport）尺寸
     *  3. 获取元素位置 IE8及以下缺失属性宽/高属性
     *  4. IE8 兼容 border-radius 属性方案

> [https://wildye.cn/posts/8bd15521/][https_wildye.cn_posts_8bd15521]

## 1. 获取滚动条位置 ##

*  `window.pageXOffset` 和 `window.pageYOffset` 在`IE8`及以下是不兼容的
 *  当 `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

`clientWidth`、`clientHeight`、`scrollWidth`、`scrollHeight`

尺寸（有滚动条） = `content + 3px`;

尺寸（无滚动条） = `content + padding * 2`;

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

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

*  利用VML矢量可标记语言作为画笔绘出圆角  
    下载：[http://css3pie.com/download-latest-1.x][http_css3pie.com_download-latest-1.x]
 *  在 IE8及一下引入 PIE.js 文件

*  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`

[https_wildye.cn_posts_8bd15521]: https://wildye.cn/posts/8bd15521/
[http_css3pie.com_download-latest-1.x]: http://css3pie.com/download-latest-1.x