细数在兼容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="请输入姓名" />
js
//解决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(),解决方法:
js
//去左空格;
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(),解决方法:
js
//解决 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的仿真模式