细数在兼容ie8过程中碰到的坑，持续更新中

细数在兼容ie8过程中碰到的坑，持续更新中

1.透明度

ie8并不支持rgba来设置透明度，解决方案如下：

css

background: #000000;
filter: alpha(opacity=50) !important;
opacity: .5 !important;

2.placeholder

ie8会将input或者textarea中的placeholder的值认为是当做是value值，导致在数据交互的过程中出现问题

我的解决方案是：先给input或者textarea增加一个自定义属性data-placeholder，其值等于placeholder，然后给input或者textarea增加获取焦点和失去焦点事件操作dom

html

<input type="text" data-placeholder="请输入姓名" />

//解决ie8  placehold问题

function FocusChangeText(ele) {
    var changeText = "";
    changeText = $(ele).val();
    if (changeText == $(ele).attr("data-placeholder")) {
        $(ele).val("");
    }
}
function BlurChangeText(ele) {
    var changeText = "";
    changeText = $(ele).val();
    if (changeText == "") {
        $(ele).val($(ele).attr("data-placeholder")).addClass("text-grey").removeClass("black");
    } else {
        $(ele).removeClass("text-grey").addClass("black");
    }
}

3.trim()

ie8不支持trim()方法，但是支持ltrim()和rtrim()，解决方法：

 //去左空格; 
function ltrim(s){ 
 return s.replace(/(^/s*)/g, "");
} 
//去右空格; 
function rtrim(s){ 
  return s.replace(/(/s*$)/g, "");
} 
//去左右空格; 
function trim(s){ 
    //s.replace(/(^/s*)|(/s*$)/g, "");
 return rtrim(ltrim(s)); 
}

4.console.log()

ie8不支持console.log(),解决方法：

//解决 IE8、IE9 不支持 console 问题
  window.console = window.console || (function () {
    var c = {}; c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile
    = c.clear = c.exception = c.trace = c.assert = function () { };
    return c;
  })();

5.display

ie8在display的兼容性上支持的并不是很好，例如flex、inline-flex等，建议在书写时使用真正的ie8浏览器测试，而不是360的仿真模式

细数在兼容ie8过程中碰到的坑，持续更新中

猜你喜欢