IE6中常见兼容性问题及浏览器显示难题

1.双倍边距Bug

问题描述:假如有一个ul,里面有若干li,当li设置为左浮动时,此时设置li的margin-left为10px,会在最左侧呈现双倍情况。即20px

正常显示:

IE6显示:

修正方法:给整个li这个集合加上 display:inline

 

2.3像素问题

问题描述:比如有两个div,前一个蓝色,后一个绿色,前一个设置了float:left,后面那个没有浮动,此时两个div并不重叠,而是并排并且二者中间相隔3px。

正常显示:

IE6显示:

修正方法:用position:absolute; left:-(X+3)px; 解决,其他情况出现3像素的时候,用浮动div的margin-left:-3px找补。

3.当子元素高度未知,并且给丫设置了浮动,怎么让父元素适应子元素高度?

例子:我用一个固定宽度且有1px黑框的div包一个未知高度的<p>标签,p标签设置浮动,父级不经处理情况下显示:

解决方式:给父容器加上 overflow:auto;就可以让黑框包着p标签。IE6下也可行。

4.IE6臭名昭著的png蓝底问题

问题描述:在IE7+及其他非IE浏览器中,png图像是一种高分辨率的透明图片,解决了gif粗糙的分辨率问题,但是IE6却让png不透明,后面糊上了个难看的淡蓝色底子

解决方式:{filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/alert_fax.png);background:none;}用滤镜,加黑部分不要漏。这样就能解决了。

5.CSS sprites技术下IE6小图标闪烁

问题原因:因为IE6没有缓存,所以需要重新加载图像。

解决方式:用JS给丫设图片缓存,代码:document.execCommand("BackgroundImageCache",false,true);

6.IE6不支持min-height问题

问题原因:IE6不支持min-height属性,它只认height,也就说IE6没有最小高度这个概念。例如:我设置一黑框div包着一个不定高度的p标签,我设div的min-height:100px;当p高度变小时div只会缩到100px为止。

正常:

IE6下:

解决方法:使用其他浏览器支持的!important后缀缀上height:auto,然后给IE6设置固定height,这样其他浏览器只会渲染height:auto。可如果给IE6固定高度,那么它就失去了高度自适应这一优点。用JS?

PS:这还适用于最大高度,最小宽度,最大宽度。

7.IE6操蛋的绝对定位配合浏览器尺寸问题

问题描述:在IE6下,如果给body居中了,而且这个body中有一个position:absolute;的div。当浏览器改变时(绿框body,黑框div)

正常:div跟着body走,还是在body的左上角。

IE6下:div错过了body

解决方式:给body加上position:relative;

8.IE6不支持PNG图像解决方法

需要使用滤镜来做,方法是在样式中加入:{filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/XXXX.png);background:none;}

9.推荐的IE6 hack 方法

在样式表中用下划线的方式对样式表进行hack有缺点,IE浏览器在某些特殊情况下对这种方式不支持,导致页面加载时样式无法读取发生错误,最好的方法是:<!--[if IE 6]><style></style><![endif]-->

10.父级元素png做背景上加了滤镜后非透明的链接无法点击了

是因为filter后的图像把这些都盖上了,给超链接加 position:relative的方法也会在父级绝对定位的情况下失去作用,那么我们就需要改变思路,在父级中专门再建一个div,用它来加载背景png,就可以解决这个问题。

11.只为父级加了margin,可子级元素在严格限定排版宽高的父级中串行/错位

 因为父级的margin会遗传给子级,导致子级有了margin,同时还有了双倍,最好的办法就是在子级的样式表中再把margin弄成自己想要的。

--------------------------------------分割线------------------------------------------------------------------

IE6 无可奈何的缺陷:

1.hover:只有带href的家伙才能支持hover,其他的东西不支持。

2.父元素已经规定好宽高,但子元素过宽或过高会把父元素撑大问题无法避免。只能尽量避免。

3.1px问题:子元素绝对定位,当父元素的宽高为奇数时,导致子元素的right和bottom比目标值大1px。只能尽量避免

4.当li包含块级元素且垂直显示的时候,会发生垂直的li间出现其他浏览器没有的空隙,解决办法对布局是有毁伤的:把li display:inline;

 

posted @ 2014-01-10 21:45  白菜帮子  阅读(384)  评论(0编辑  收藏  举报