IE8兼容性问题
2019-05-16 本文已影响0人
余音绕梁_0809
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;
}
