项目最新版本的开发进入后期阶段,今天鼓起勇气打开IE Test,如我所料啊!页面在IE6下面目全非了,呜呜~~

现在开始修复IE的Bug(大部分是IE6,IE7 8也有一些),顺便记录下来。

1、png图片在IE6下出现透明或背景变灰的bug;

分析: 随处可见,遇到时就想好策略。

解决方法:1、使用滤镜,语法如下

.image-style { background-image: none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”filename.png”, sizingMethod=”scale”);

}

注意:使用滤镜需要性能损耗。

2、给IE6单独制作一张.gif图片,打上hack

.image-style{ background:transparent url(“filename.png”) no-repeat scroll 0 0;

_background-image:url(“filename.gif”);

}

这种方法只需要在切图时多存储一份.gif格式的图片,一般采用这种方法。

2、position:absolute定位在IE6下存在left和bottom相对最外层视窗(body)定位的bug:

分析: 由于在IE6下,相对定位的元素没有获得IE内部的haslayout属性,因此不创建新的定位上下文,所以绝对定位的元素相对于视口进行定位。

解决方法:1、设置height:1%;//小的高度不会对实际高度找出影响

2、相对定位的祖先元素设置过高度和宽度。

3、相对定位的祖先元素设置_zoom:1,用于触发元素的layout属性。

3、IE6下border不显示的bug

分析:对一个div定义border,但是却不显示。

解决方法:定义宽度;定义高度;清除浮动。

4、在 W3C 规范中 position 是可以使用在任何元素上的,但table元素的 position:relative 却有例外:

 

The effect of ‘position:relative’ on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell,

 

and table-caption elements is undefined.

 

分析:经测试,在浏览器(IE 除外)中给 table 定义 position:relative 属性是无效的。如果的确需要在表格中使用该属性,建议在单元格中嵌套一个 div 元素,再在其上设置 position:relative 属性来模拟。

5、IE6下overflow:hidden失效bug

分析:在开发中经常使用overflow:hidden来清除浮动,也就是在浮动元素的父元素中使用这个属性,就相当于添加了一个clear元素。但是,这在IE6下不给力。

解决方法:只要在父元素中给定一个宽度就可解决这个bug;

6、IE6下的双空白边浮动bug

分析:这是一个常见的出名BUG,给IE6下的浮动元素定义margin-left或者margin-right,实际上是数值的两倍。

解决方法:把这个浮动元素设置为display:inline;

7、IE6下float元素如果没有定义宽度,在浮动时它会自动占满一行的bug

分析:即使对这个浮动元素内部的元素设置了宽度,也是无效的

解决方法:一般用于布局的浮动元素不会要求横向可自由拓展的,那么可以通过设置宽度来解决这个bug.

8、IE6下img元素底部留白的bug

分析:代码结构如下

<div>

<img src=”filename” alt=”图片” />

</div>

解决方法:把代码结构改成如下:

<div><img src=”filename” alt=”图片” /></div>

并设置img元素的display:block(img元素默认是一个display:inline的元素)

9、IE6 7下的浮动元素的父元素在拖动滚动条时出现的边框缺失bug

解决方法:设置zoom,使元素获得布局。

10、 IE(6 7 8) 的 z-index bug

分析:看代码

xhtml:
<div id=”container”>
<div id=”box1″>这个box应该在上面</div>
</div>
<div id=”box2″>
这个box应该在下面,IE浏览器会对定位元素产生一个新的stacking
context ,甚至当元素 z-index的为“auto”。
</div>
css:
container { position: relative; }
#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: 20; }
#box2 { position: absolute; top: 50px; left: 160px; width: 200px; height: 200px; background-color: green; z-index: 10; }

结果:ff/chrome显示为box1在box2上,而IE确实box2显示在了box1上

原因:IE浏览器会对定位的元素产生一个新的stacking context,并且从z-index:0开始

11、关于IE8的一些资料

12、IE6下的重复字符bug

分析:如下图所示

出现这个BUG的“机遇“其实并不大,要满足以下一个或者多个条件:

1.父元素的内部有多个浮动元素。

2. 最后一个浮动元素前有隐藏元素:包括html注释和display:none的元素

3.子元素的宽度和父元素相同,父元素的宽度减去子元素宽度小于3px

最终得出的结论是:溢出文字的字数=注释的条数 *2-1

这个变态BUG的最早文献是出现在2004年,这里可见

解决方法:

1.把浮动的子元素加上display:inline;属性(推荐)

2.去掉注释和所有隐藏元素(缺点:特殊情况下不一定可以删除)

3. 把浮动的子元素加上margin-right:-3px;属性(缺点:要加IE6的hack,也算是好方法)

4.在隐藏的DIV外嵌套一个DIV(缺点:增加的结果复杂性)

详解:http://www.cnblogs.com/javashi/archive/2010/05/08/1730504.html

13、IE6下的空div bug

分析:通常在实现可拓展的圆角框时,习惯在头尾使用两个空元素来放置背景图片如<div></div>,但是这个空元素在IE6下会莫名的产生一个高度,为原先定义的2倍。代码如下:

<div></div>
<div>content</div>
<div></div>
样式:
.hd{background:url(“filename”) transparent …; height:5px;}

 

解决方法:为这个空元素设定line-height:0;font-size:1px;即可解决这个bug。

14、IE6下对position:fixed不支持的bug

分析:问题的原因是IE6下的fixed元素绝对定位位置是针对html元素的,而滚动条则是针对body元素的

解决方法:

body{background-image:(“xx.gif”);}/*一张不存在的图片*/
.fixed{_postion:absolute;expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight))}//底部

expression(eval(document.documentElement.scrollTop));/*头部*/
expression(eval(document.documentElement.clientHeight/2+document.documentElement.scrollTop-80));/*右侧*/
 
 

15、IE6下input/textarea/select元素继承父元素的水平margin的bug

分析:http://haslayout.net/css/Form-Control-Double-Margin-Bug

解决方法:这个bug在开发中是经常遇到的,解决方法就是在input或者textarea元素上使用负的margin,使元素重新布局。

16、IE6不支持min-height/max-height/min-width/max-width的bug

分析:无

解决方法:根据IE6的特性模拟出来

height:auto!important;
min-height: x px;/*需要的最小高度*/
height: x px

17、IE6下position:relative的bug

分析:在IE6下父层(或者上层)设置为position:relative且没有写宽度,而这个元素又被一个带有滚动条overflow:auto/scroll属性包含的时候,它将会表现出absulute,并且在鼠标移上去时,会在整个屏幕上滑动;

解决方法:找到了bug的原因后,事情就变得简单了,方法有两种

1、把父层(或者更上层)的relative删掉,但有时候这个relative是必须的,那就只能用第二种方法了;

2、不删除relative,但给这个元素设定一个宽度,可以是100%。

18、IE6下样式不表现

分析:通常一个页面需要载入2-3个样式文件,但其中有某个样式文件里的样式完全不表现,你或许怀疑这个文件没有被加载,这个时候打开IE Debug看文件的传输情况,很清晰的看到文件正常加载了,纳闷吧!后来找到了

原因,主要有两个:

1、这个文件的编码和页面定义的character编码不一致;

2、不正确的注释(这个也有可能是页面编码不正确,而注释是中文导致的)

解决方法:检查页面编码;去掉注释;

19、IE6浮动元素与非浮动元素间隔的3pxbug

分析:在IE下,一个浮动元素与一个非浮动元素相邻时候,中间会莫名的出现一个3px的间隔。

解决方法:1、由于明确知道是3px,所以可以使用负的margin,但是由于IE下不同的盒模式,又会导致宽度上的不同,浮动元素的宽度如果超出了父元素的宽度在IE下是会有bug的,所以不建议使用这种方法。

2、不让浮动元素和非浮动元素相邻,或者把非浮动元素也设置为浮动元素。

20、IE6下img元素底部出现5px的空白间隙bug

分析:

代码结构如下:

<li><a href=”#”><img src=”xxx.png” alt=”xxx” /></a></li>

在ie6下会出现5px的空白。

解决方法:

1、
ul li{display:block;font-size:0;}
img{vertical-align:bottom;}
2、img{_margin-bottom:-5px;}

21、IE下透明度无效bug

分析:在IE的所有版本中,父元素设置了透明度,而子元素如果有position:relative/absolute时,子元素无法继承父元素的透明度。

找了一些资料:http://younglab.blog.51cto.com/416652/431363

解决方法:除了资料中使用的方法(触发layout),还有个土方法,那就是在透明度比较小的区域中,使用具有透明度的图片和字体模糊。

22、IE下overflow:auto/scroll不起作用的bug

分析:在IE下overflow不起作用,但是在火狐下是正常显示的,IE下overflow如同虚设,内容是表现出来了,但是确实在区域的下面显示,滚动条也无法使用。

解决方法:对设置了overflow的元素设定高度和宽度(一般使用滚动条的都会设置这些属性),然后给这个元素进行position定位,relative或者absolute都是可以的

23、IE6 7 8下元素重叠bug

分析:页面操作过程中对一组li元素做remove()或者hide()时,被移除的li的下一个兄弟元素会往下偏移,从而发生元素重叠。

解决方法:js中对这个li元素的父元素加上toggleClass(“ie-hack”);//ie-hack为不存在的class。
原因不明。

24、IE6/7/8下直接对input输入框使用背景图片,当输入值冲出背景图片宽度时,背景图片会随字符滑动

解决方法:在input框外加一个div,在这个div上设置背景

25、去掉a链接难看外框的方法:

IE下设置hideFocus=true,其他浏览器设置:outline:none

<a href=”…” hideFocus=”true” title=”..”/>
a{
outline:none
}
还有一种是用expression的方法,但是耗性能,原因是每秒钟执行了很多次。不推荐是用
a{
blr:expression(this.onFocus=this.blue())
}

 http://www.cnblogs.com/svage/archive/2011/02/12/1952704.html

作者 xingzhou

发表回复