IE8兼容性问题

作者: 余音绕梁_0809 | 来源:发表于2019-05-16 16:46 被阅读0次

1、兼容H5标签和部分C3属性

<!--[if IE]>
      //兼容IE8 的 H5标签
      <script src='./assets/html5.js'></script>
      //支持圆角、阴影等
      <script src="./assets/js/PIE.js"></script>
      //支持input框的 placeholder的显示
      <script src="./assets/js/placeholder.js"></script>
  <![endif]-->

1.1 兼容H5标签 html5.js

/*
 HTML5 Shiv v3.6.2pre | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
 Uncompressed source: https://github.com/aFarkas/html5shiv
*/
(function(l, f) {
    function m() {
        var a = e.elements;
        return "string" == typeof a ? a.split(" ") : a
    }

    function i(a) {
        var b = n[a[o]];
        b || (b = {}, h++, a[o] = h, n[h] = b);
        return b
    }

    function p(a, b, c) {
        b || (b = f);
        if (g) return b.createElement(a);
        c || (c = i(b));
        b = c.cache[a] ? c.cache[a].cloneNode() : r.test(a) ? (c.cache[a] = c.createElem(a)).cloneNode() : c.createElem(a);
        return b.canHaveChildren && !s.test(a) ? c.frag.appendChild(b) : b
    }

    function t(a, b) {
        if (!b.cache) b.cache = {}, b.createElem = a.createElement, b.createFrag = a.createDocumentFragment, b.frag = b.createFrag();
        a.createElement = function(c) {
            return !e.shivMethods ? b.createElem(c) : p(c, a, b)
        };
        a.createDocumentFragment = Function("h,f", "return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&(" + m().join().replace(/\w+/g, function(a) {
            b.createElem(a);
            b.frag.createElement(a);
            return 'c("' + a + '")'
        }) + ");return n}")(e, b.frag)
    }

    function q(a) {
        a || (a = f);
        var b = i(a);
        if (e.shivCSS && !j && !b.hasCSS) {
            var c, d = a;
            c = d.createElement("p");
            d = d.getElementsByTagName("head")[0] || d.documentElement;
            c.innerHTML = "x<style>article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}</style>";
            c = d.insertBefore(c.lastChild, d.firstChild);
            b.hasCSS = !! c
        }
        g || t(a, b);
        return a
    }
    var k = l.html5 || {}, s = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,
        r = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,
        j, o = "_html5shiv",
        h = 0,
        n = {}, g;
    (function() {
        try {
            var a = f.createElement("a");
            a.innerHTML = "<xyz></xyz>";
            j = "hidden" in a;
            var b;
            if (!(b = 1 == a.childNodes.length)) {
                f.createElement("a");
                var c = f.createDocumentFragment();
                b = "undefined" == typeof c.cloneNode ||
                    "undefined" == typeof c.createDocumentFragment || "undefined" == typeof c.createElement
            }
            g = b
        } catch (d) {
            g = j = !0
        }
    })();
    var e = {
        elements: k.elements || "abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",
        version: "3.6.2pre",
        shivCSS: !1 !== k.shivCSS,
        supportsUnknownElements: g,
        shivMethods: !1 !== k.shivMethods,
        type: "default",
        shivDocument: q,
        createElement: p,
        createDocumentFragment: function(a, b) {
            a || (a = f);
            if (g) return a.createDocumentFragment();
            for (var b = b || i(a), c = b.frag.cloneNode(), d = 0, e = m(), h = e.length; d < h; d++) c.createElement(e[d]);
            return c
        }
    };
    l.html5 = e;
    q(f)
})(this, document);

1.2 支持圆角、阴影等 (PIE.js)

这个在网上可以搜到很多，要下载一个pie.js和pie.htc文件，.js文件在条件注释中引入；.htc文件在使用圆角或阴影等属性的标签中引入：如下

.ceshi{
        width: 20px;
        height: 20px;
        background-color:red;
        border-radius: 50%;
        position: relative;//这个属性不加的话  不能显示
        behavior: url(./assets/PIE.htc); //这里的地址是文件相对于html文件的位置  不是相对于css文件的位置
    }

效果如下：

image.png

1.3 兼容placeholder属性 placeholder.js

/*
 * jQuery placeholder, fix for IE6,7,8,9
 * @website itmyhome.com
 */
var JPlaceHolder = {
    //检测
    _check : function(){
        return 'placeholder' in document.createElement('input');
    },
    //初始化
    init : function(){
        if(!this._check()){
            this.fix();
        }
    },
    //修复
    fix : function(){
        jQuery(':input[placeholder]').each(function(index, element) {

            var self = $(this), txt = self.attr('placeholder');
            self.wrap($('<div></div>').css({position:'relative', zoom:'1', border:'none', background:'none', padding:'none', margin:'none'}));
            var pos = self.position(), h = self.outerHeight(true), 
            paddingleft = self.css('padding-left');
            var holder = $('<span></span>').text(txt).css({position:'absolute', left:pos.left, top:pos.top, height:h, lienHeight:h, paddingLeft:paddingleft, color:'#aaa'}).appendTo(self.parent());
            self.focusin(function(e) {
                holder.hide();
            }).focusout(function(e) {
                if(!self.val()){
                    holder.show();
                }
            });
            holder.click(function(e) {
                holder.hide();
                self.focus();
            });
        });
    }
};
//执行
jQuery(function(){
    JPlaceHolder.init();    
});

注意：
自测：在使用这个js的时候，palceholder的位置并没有刚好在input框的垂直居中位置:具体如下

image.png
后面给input框的外层盒子一个line-height 和 input 框的height的值相同就好了：如下

image.png

1.4 关于透明度opacity

IE8不支持rgba的写法，opacity也没有效果；目前实现的方式：filter:alpha(opacity=透明度);

opacity:0.37;             
//应该写为
filter:alpha(opacity=37);

1.5 transform

// 逆时针旋转90度
 transform: rotate(-90deg);
 -moz-transform:rotate(-90deg); 
 -webkit-transform:rotate(-90deg);
//rotation=3   这个适配的ie8 主要看rotation的参数值（0，1，2，3）对应0，90，180，270
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

2、jQuery

IE8兼容jQuery2.0以下

项目还在进行中遇到问题再总结。。。。

3、IE11相关问题

3.1、vue.js单页面，在IE11不支持使用ES6语法

<script src="js/polyfill.min.js"></script>
<script src="js/browser.min.js"></script>
// type="text/babel"  一定要加！！！

image.png

3.2、vue-cli项目,ie11浏览器报Promise未定义的错误

报错：

{description: "“Promise”未定义", message: "“Promise”未定义", name: "ReferenceEr...", number: -2146823279, stack: "ReferenceEr..."}

解决办法

cnpm install babel-polyfill --save
在main.ts中 import 'babel-polyfill'
如果使用了vuex，则在vuex的index.ts文件中也要 import 'babel-polyfill'，最好放在 import Vuex from 'vuex' 的前面

3.3、去除input输入框默认在ie或者edge下出现删除按钮

input::-ms-clear{display: none;}// ::-ms-clear 是文本清除button，也就是input右方的叉叉
input::-ms-reveal{display: none;}// ::-ms-reveal是password查看button，也就password框右边的小眼睛。
input::-o-clear{display: none;} //去除edge下的删除按钮

3.4、IE11部分问题

1、在谷歌写position样式的时候，left或者bottom这些值为0的时候，不写也是可以正常展示的；但是IE11是不可以的，这些样式都要写全；
2、flex布局：flex-start布局的时候，右边的盒子一般不写flex: 1（个人而言）；但是在IE11 中若是右边的盒子没有flex: 1这个样式，左右两个盒子会是justify-content: space-between;（两端对齐）的布局样式

未写flex：1

image.png
写flex：1后

image.png

4、flex布局兼容写法--常用类名（global.css）

/* 去除input输入框默认在ie或者edge下出现删除按钮 和 password眼睛图标 */
input::-ms-clear{display: none;}
input::-ms-reveal{display: none;}
input::-o-clear{display: none;}
/*** 全局去除滚动条 ****/
*::-webkit-scrollbar{
    display: none !important;
  }
  button,input,textarea{
    outline: none;
  }
  /* flex布局 */
  .flexBox {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  /* 改变主轴方向 */
  .flexColumn{
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  
  }
  /* 两端对齐 */
  .flexBetween{
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  
  }
  /* 垂直居中 */
  .flexAlign{
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  /* 左对齐 */
  .flexLeft {
    -webkit-box-pack: justify;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: justify;
    justify-content: flex-start;
  
  }
  .flexRight {
    -webkit-box-pack: justify;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: justify;
    justify-content: flex-end;
  }
  /* 水平居中  */
  .flexCenter {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .flexMiddle{
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .flexWrap{
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap:wrap;
  }

IE8兼容性问题

1、兼容H5标签和部分C3属性

1.1 兼容H5标签 html5.js

1.2 支持圆角、阴影等 (PIE.js)

1.3 兼容placeholder属性 placeholder.js

1.4 关于透明度opacity

1.5 transform

2、jQuery

项目还在进行中遇到问题再总结。。。。

3、IE11相关问题

3.1、vue.js单页面，在IE11不支持使用ES6语法

3.2、vue-cli项目,ie11浏览器报Promise未定义的错误

3.3、去除input输入框默认在ie或者edge下出现删除按钮

3.4、IE11部分问题

4、flex布局兼容写法--常用类名（global.css）

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端

IE8兼容性问题

1、兼容H5标签和部分C3属性

1.1 兼容H5标签 html5.js

1.2 支持圆角、阴影等 (PIE.js)

1.3 兼容placeholder属性 placeholder.js

1.4 关于透明度opacity

1.5 transform

2、jQuery

项目还在进行中 遇到问题再总结。。。。

3、IE11相关问题

3.1、vue.js单页面，在IE11不支持使用ES6语法

3.2、vue-cli项目,ie11浏览器报Promise未定义的错误

3.3、去除input输入框默认在ie或者edge下出现删除按钮

3.4、IE11部分问题

4、flex布局兼容写法--常用类名（global.css）

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端

项目还在进行中遇到问题再总结。。。。