前端: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")

);

}

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

你可能感兴趣的:(兼容性)