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

最新推荐文章于 2024-10-17 16:41:57 发布

原创最新推荐文章于 2024-10-17 16:41:57 发布

· 1k 阅读

7 ·

版权

文章标签：

#html #css

前端同时被 2 个专栏收录

26 篇文章

订阅专栏

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() {
	//任意事件需要做的事情
}

问题：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识别，颜色为黑