IE6 Bug Fix问题的经验总结

好久没有做网页相关的开发了,再不记录下,恐怕都要忘记光光了。知识贵在积累,温故而知新,才能不断提高。

IE6透明png图片背景变为灰色

可以使用IE的透明滤镜解决 ,注意src参数是相对于当前目录而不是网站根目录,所以通常使用图片的绝对路径。sizingMethod通常使用scale。但是会造成内部的瞄链接失效,需要为其添加position:relative,而且其上个父层position必须不为relative或fixed,否则需要再添加一层。但是图片过多时候,会造成IE6浏览器卡死的现象

FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src=“”)

另外的办法就是使用IE PNG Fix,但是实际的效果往往不尽人意,特别是png图片比较多的情况下。它通过CSS behaviors实现的,处理效率不好,可能造成浏览器吃掉很多的内存和CPU。

最好的方法是对IE6设置背景色为相同的灰色,这样背景和图片浑然一体,就看不出来图片显示出了问题了。对包含图片的父级块应用以下样式即可:

_background-color:#D8E9FA;

IE6对于position:relative的DIV会随鼠标滚动而滚动

这是IE6的一个已知BUG:当某position:relative元素被带有overflow:auto/scroll属性的块级元素包含时,会表现出postion:absolute属性相似的行为,因而产生这种现象。

解决方法:

1.为包含块元素添加属性position:relative 。

2.把该元素的position:relative属性去掉,使用默认的static定位,并通过margin-top等属性实现相似的效果。

IE6不支持position:fixed的解决办法

.ie6fixedTL {	/*左上固定*/
	position:absolute;
	left:expression(eval(document.documentElement.scrollLeft));
	top:expression(eval(document.documentElement.scrollTop));
}

* html .ie6fixedBR {	/*右下固定*/
	position:absolute;
	left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));
	top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}

为了解决固定之后元素抖动的问题,还需添加以下代码:

* html,* html body {
	background-image:url(about:blank);
	background-attachment:fixed;
}

IE6不支持min-width\min-height\max-height\max-width属性

以max-width属性为例,如果要设置max-width:580px,IE6下通过下面的代码实现:

_width: expression( this.scrollWidth > 581 ? "580px" : "auto" );

三元运算应该都清楚的吧,当当前元素的宽度>581px为TRUE时取580px,否则设为auto,这样宽度就不会超过580px了。注意问号前面的数字一定要比后面的数字大一,这又是一个bug,就不详细讲了!

类似的min-width:580px等价于_width: expression( this.scrollWidth > 581 ? "auto" : "580px" ); min-height​等价于_width: expression( this.scrollHeight > 581 ? "auto" : "580px" ); max-height等价于_width: expression( this.scrollHeight > 581 ? "580px" : "auto" );

另外一种方法是利用IE6的bug来治疗IE6不支持min-width\min-height的问题,这是偶独家原创的哦。以min-width:580px为例,代码如下;
​_width: 580px;

_overflow:visible;

什么原理?马上分解

IE6 overflow:visible的BUG

IE6和IE7+浏览器的一个与众不同的地方就是但设置某元素为overflow:visible时,IE6会将overflow的那部分不但显示出来,而且会占用布局空间,而IE7+是不会占用空间的,也就是说溢出的元素可以和下面的元素重叠在一起。

因此,对于定义上面代码的样式的元素,但宽度小于580px时,就是按照_width: 580px;设置宽度到580px。而当元素宽度大于580px时,又会扩展布局到元素实际的尺寸,这样就达到了和min-width一样的效果。

如果你想和IE7+那样正常的overflow:visible属性,也就是说溢出的元素不占用布局,那你可以使用以下方法

.fixedDIV {
    height:150px;
    overflow:visible;
    _overflow:hidden;
}
.overflowDIV {
    height:200px;
    _ position:relative;
}

fixedDIV为你想固定一个高度值的元素,overflowDIV为前者内部的一个块元素(如果没有自行添加),溢出的内容就在overflowDIV中。这也是IE6的一个已知的问题:当固定高度值得元素尽管设置overflow:hidden,但是当子元素的position属性为relative时,溢出的元素不会被裁剪掉,这和IE7+ overflow:visible的效果相同。

好了,就记得这么多了,以后记起来了再写,有木有感觉到IE6 bug fix就是一个“以毒攻毒”的过程啊。

本文采用CC BY-NC-ND协议进行许可,传播时请保留链接:http://huangzhiqun.com/skill/ie6-bug-fix.html

1,946 次阅读
  1. 目前还没有评论

发表评论

× 一 = 四

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。

疑惑 调皮 伤心 抠鼻 惊讶 微笑 脸红 坏笑 惊讶 发呆 撇嘴 酷 阴险 咒骂 愤怒 白眼 鼓掌 得意 汗 打呵欠 大哭 憨笑

评论