IE兼容性处理

2021-01-15

字数统计: 827字 | 阅读时长≈ 3分

js判断浏览器是否为IE浏览器

IE6-8和IE11都适用：

function isIE() { //ie?
     if (!!window.ActiveXObject || "ActiveXObject" in window)
            { return true; }
     else
            { return false; }
 }

window.ActiveXObject：判断浏览器是否支持ActiveX控件，只有IE浏览器里面支持ActiveX控件
如果浏览器支持ActiveX控件，可以利用 var xml = new ActiveXObject(“Microsoft.XMLHTTP”); 创建XMLHttpRequest 对象（这是在IE7以前的版本中）；

在较新的IE版本中可以利用 var xml = new ActiveXObject(“Msxml2.XMLHTTP”)的形式创建XMLHttpRequest对象;

而在IE7及非IE浏览器中可以利用v ar xml=new XMLHttpRequest()创建XMLHttpRequest对象。

IE浏览器固定定位（fixed）的弹窗

解决：

使用相对定位（absolute），弹出蒙层
body使用overflow:hidden样式，让body溢出隐藏，控制页面不滚动。

去除IE10中输入框和密码框的X按钮和小眼睛

方法：
/*去除IE输入框的X标记*/
input[type=text]::-ms-clear {display: none;}

/*去除IE输入框的小眼睛标记*/
input[type=password]::-ms-reveal {display: none;}

如果想要单独去除某个输入框的话，可以把input[type=text]改为.target-class即可。

去掉a标签点击(active)状态的背景色

ie浏览器，点击a标签时，点击状态，有个背景色
想去掉这个样式：
设置：
a:active{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    outline: none;
    background: none;
    text-decoration: none;
}

复选框 input type=”check”

普通浏览器：
<input type="checkbox" checked="" />
在IE浏览器中checked属性的写法是大写的:
<input type="checkbox" CHECKED="" />

所以js获取checked时，要考虑ie的情况。

ie 下input输入框readonly失效,光标仍可聚焦

ie下input输入框设置了readonly属性,但是鼠标还可以点击光标聚焦,

改为bootstrap的disable属性后,无法聚焦但是表单提交又失效,无法传递参数,

而且聚焦后,backspace按键默认触发浏览器的返回功能,

后改为增加屈性unselectable=’on’,可以解决.

1 2	$("#config_name'+index).attr("readonly", "readonly"); $("#config_name'+index ).attr("unselectable", "on");

1	<pre name="code" class="javascript">$('#config_name'+index) .removeAttr("unselectable");

文件上传按钮（input type= “file”）

美化后的按钮，在在ie浏览器下要双击才能打开

目的是让选择文件的文字铺满该按钮，可以点击

a标签添加事件的注意事项

1	<a href="javascript:void(0);" class="refresh-icon"></a>

当不添加链接的时候，只是为了触发事件的时候，要加上void(0);不然在IE浏览器会报错

解决IE下a标签点击有虚线边框的问题

1	a:focus{outline:none;}

IE上设置input type = file文件上传区域的光标不闪烁

我们使用文件上传时,时常自定义图标,这时候通常会把input的透明度设置为0,然后覆盖在一个按钮上实现自定义图标，但是在IE上使用时会出现光标闪烁问题

解决办法: css设置font-size为0

js判断浏览器是否为IE浏览器

IE6-8和IE11都适用:

function isIE() {
	if (!!window.Activexobject || "Activexobject" in window)
 		return true;
 	}
	else{
 		return false;
 	}
}

本文作者： LQbank
本文链接： http://example.com/2021/01/15/IE兼容性处理/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！