前端项⽬兼容ie浏览器踩坑总结
1. 问题：ie9以下，input事件失效
解决⽅案：通过给dom绑定onpropertychange来替换原有的事件
注：（1）onpropertychange事件是专门在ie浏览器⾥⾯⽣效的，所以input的原有事件与其并不冲突；
（2）onpropertychange事件是在input对象改变任何属性时都会触发；
（3）onpropertychange事件只能通过dom绑定事件。
实现代码如：
<input type="text"class="form-control"id="replyDay"onpropertychange="getReplyDay()"name="replyDay"/>
function getReplyDay(){
//任意事件需要做的事情
}
2. 问题：ie9以下，⽇期显⽰NaN-NaN-NaN-NaN
解决⽅案：time = place(/-/g,’/’);
代码⽰例：
function dateFormat(time){
if(!date)return"";
if(typeof date ==='string'){
time =new place(/-/g,'/').replace(/T|Z/g,' ').replace(/\s+/g,''));
}else if(typeof date ==='object'){
time =new Date(date);
}
return time;
}
3. 问题：ie9以下，trim()⽅法失效
解决⽅案：⽤正则表达式匹配去掉空字符串
代码⽰例：
string = place(/\s+/g,'');
4. 问题：ie12及以下，select框出现默认下拉图标样式
解决⽅案：给select标签添加appearance:none样式
代码⽰例：
<select class="info-select">
<option selected="selected">1</option>
<option>2</option>
</select>
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand{display: none;}
.info-select{
width: 12%;
margin-left: 64%;
border: none;
outline: none;
/*将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-
webkit-appearance:none;
-ms-appearance:none;
/*在选择框的最右侧中间显⽰⼩箭头图⽚*/
background:url(../img/arrow.png) no-repeat scroll right center transparent;
}
5. 问题：ie9以下，出现报错：对象不⽀持“addEventListener”属性或⽅法
解决⽅案：替换项⽬引⽤的jQuery版本，jQuery 2.x 不⽀持IE9以下的IE浏览器，jQuery 1.x版⽀持IE6/7/8
6. 问题：ie12及以下，iframe默认有背景⾊
解决⽅案：给iframe标签上加上属性：allowTransparency=“true”
⽰例代码：
<iframe allowTransparency="true"/>
7. 问题：ie12及以下，img有边框并且有颜⾊，边框会占位置
解决⽅案：给img元素添加样式 border:none
⽰例代码：
img{border:none }
8. 问题：ie9以下，html5新标签不⽣效
解决⽅案：统⼀使⽤div标签代替
注：html5新标签有：
<header>定义页⾯或区段的头部；
<footer>定义页⾯或区段的尾部；
<nav>定义页⾯或区段的导航区域；
<section>页⾯的逻辑区域或内容组合；
<article>定义正⽂或⼀篇完整的内容；
<aside>定义补充或相关内容；
9. 问题：ie9以下，opacity属性不⽣效
解决⽅案：使⽤css filter：样式
⽰例代码：
opacity_class{
filter:alpha(opacity=50);
opacity: 0.5;
}
10. 问题：ie8以下，当标签的⾼度设置⼩于10px，会超出⾃⼰设置的⾼度
解决⽅案：超出⾼度的标签设置overflow：hidden，或者设置line-height的值⼩于你的设置⾼度
html5颜代码
11. 问题：ie12及以下，dom.addEventListener()原⽣事件失效
解决⽅案：将dom.addEventListener()换成dom.attachEvent()
12. 问题：ie12及以下，input输⼊框设置了readonly属性，但是⿏标还可以点击光标聚焦
解决⽅案：给input标签加上 unselectable=‘on’ 属性
13. 只在ie浏览器⽣效代码（ie所有版本）
color:blue \9;//IE8,IE9及以上版本识别，字体颜⾊为蓝
*color:orange;//IE7识别，字体颜⾊为橘⾊
_color:black;//IE6识别，颜⾊为⿊

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。