前端项目兼容ie浏览器踩坑总结

it2024-10-10  44

问题: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> /*清除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; } 问题: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识别,颜色为黑
最新回复(0)