问题: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() {
}
问题:ie9以下,日期显示NaN-NaN-NaN-NaN 解决方案:time = time.replace(/-/g,’/’); 代码示例:
function dateFormat(time
) {
if(!date
)return "";
if(typeof date
=== 'string'){
time
= new Date(date
.replace(/-/g,'/').replace(/T|Z/g,' ').replace(/\s+/g, ''));
}else if(typeof date
=== 'object'){
time
= new Date(date
) ;
}
return time
;
}
问题:ie9以下,trim()方法失效 解决方案:用正则表达式匹配去掉空字符串 代码示例:
string
= string
.replace(/\s+/g, '');
问题:ie12及以下,select框出现默认下拉图标样式 解决方案:给select标签添加appearance:none样式 代码示例:
<select class="info-select">
<option selected="selected">1
</option>
<option>2
</option>
</select>
select::-ms-expand { display: none
; }
.info-select{
width: 12%
;
margin-left: 64%
;
border: none
;
outline: none
;
appearance:none
;
-moz-appearance:none
;
-webkit-appearance:none
;
-ms-appearance:none
;
background: url(../img/arrow.png) no-repeat scroll right center transparent
;
}
问题:ie9以下,出现报错:对象不支持“addEventListener”属性或方法
解决方案:替换项目引用的jQuery版本,jQuery 2.x 不支持IE9以下的IE浏览器,jQuery 1.x版支持IE6/7/8
问题:ie12及以下,iframe默认有背景色 解决方案:给iframe标签上加上属性:allowTransparency=“true” 示例代码:
<iframe allowTransparency
="true" />
问题:ie12及以下,img有边框并且有颜色,边框会占位置 解决方案:给img元素添加样式 border:none 示例代码:
img { border:none
}
问题:ie9以下,html5新标签不生效 解决方案:统一使用div标签代替 注:html5新标签有:
<header>定义页面或区段的头部;
<footer>定义页面或区段的尾部;
<nav>定义页面或区段的导航区域;
<section>页面的逻辑区域或内容组合;
<article>定义正文或一篇完整的内容;
<aside>定义补充或相关内容;
问题:ie9以下,opacity属性不生效 解决方案:使用css filter:样式 示例代码:
opacity_class {
filter:alpha(opacity=50
);
opacity: 0.5
;
}
问题:ie8以下,当标签的高度设置小于10px,会超出自己设置的高度 解决方案:超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度
问题:ie12及以下,dom.addEventListener()原生事件失效 解决方案:将dom.addEventListener()换成dom.attachEvent()
问题:ie12及以下,input输入框设置了readonly属性,但是鼠标还可以点击光标聚焦 解决方案:给input标签加上 unselectable=‘on’ 属性
只在ie浏览器生效代码(ie所有版本)
color:blue \9
;//IE8,IE9及以上版本识别,字体颜色为蓝
*
color:orange
;//IE7识别,字体颜色为橘色
_color:black
;//IE6识别,颜色为黑