前端:IE兼容性的相关方法

有一段时间做前端的时候,IE下的就兼容性是比较令人头痛的问题,我在这一过程中也是看了很多的资料,然后把一些自己觉得比较普遍的问题进行一下相关的总结。

1、在IE6下,格式为png的图片在IE6上的透明度是无法正常显示的,这时候需要有一个JS文件进行相关的修复,DD_belatedPNG.js文件可以有效的进行修复,在使用这一文件的时是使用了JS的DD_belatedPNG.fix()函数,函数括号内填写的是应用PNG的CSS选择器(可使用的ID和类选择器)和应用类型(分别为img和background两种类型),具体的语句为:

<!--[if IE 6]> <script src=" DD_belatedPNG.js"></script> <script>DD_belatedPNG.fix('*');</script> 
<![endif]-->

其中上面函数中DD_belatedPNG.fix('*')的“*”表示应用于本页面的所有的png图片,"src"表示的是该JS文件所在的位置。

2、关于在IE6下min_width、min_height、max_width、max_height的兼容性问题

/* 最小宽度 */
.min_width{min-width:300px;
/* sets max-width for IE */
_width:expression(document.body.clientWidth < 300 ? "300px" : "auto");
}

/* 最大宽度 */
.max_width{
max-width:600px;
/* sets max-width for IE */
_width:expression(document.body.clientWidth > 600 ? "600px" : "auto");
}

/* 最小高度 */
.min_height{
min-height:200px;
/* sets min-height for IE */
_height:expression(this.scrollHeight < 200 ? "200px" : "auto");
}

/* 最大高度 */
.max_height{
max-height:400px;
/* sets max-height for IE */
_height:expression(this.scrollHeight > 400 ? "400px" : "auto");
}

/* 最大最小宽度 */
.min_and_max_width{
min-width:300px;
max-width:600px;
/* sets min-width & max-width for IE */
_width: expression(
    document.body.clientWidth < 300 ? "300px" :
       ( document.body.clientWidth > 600 ? "600px" : "auto")
);
}

/* 最大最小高度 */
.min_and_max_height{
min-height:200px;
max-height:400px;
/* sets min-height & max-height for IE */
_height: expression(
    this.scrollHeight < 200 ? "200px" :
      ( this.scrollHeight > 400 ? "400px" : "auto")
);
}

以上的是一些目前来讲比较常用的,然后以后还会陆续进行补充。

原文地址:https://www.cnblogs.com/SkyScream/p/3589609.html