IE6适配性难题及IE6普遍bug详尽汇总

2021-01-20 11:39 jianzhan
1、IE6奇异分析之padding与border算入宽高
缘故:未加文本文档申明导致非盒实体模型分析
处理方式:添加文本文档申明<!doctype html>

2、IE6在块元素、上下波动、设置marin时导致margin双倍(双边距)
处理方式:display:inline

3、下列3种实际上是同1种bug,实际上也不算是个bug,举个事例:父标识高宽比20,子标识11,竖直垂直居中,20⑴1=9,9要分给文本的上面与下面,如何分?IE6就会与其它的不一样,因此,尽可能防止。
1)字体样式尺寸为单数之边框高宽比少1px
处理方式:字体样式尺寸设定为偶数或line-height为偶数
2)line-height,文字竖直垂直居中差1px
处理方式:padding-top替代line-height垂直居中,或line-height加1或减1
3)与父标识的宽度的奇偶数不一样的垂直居中导致1px的偏移
处理方式:假如父标识是单数宽度,则子标识也用单数宽度;假如是父标识偶数宽度,则子标识也用偶数宽度

4、內部盒实体模型超过父级时,父级被撑大
处理方式:父标识应用overflow:hidden

5、line-height默认设置行高bug
处理方式:line-height设值

6、行标识之间会有1小段空白
处理方式:float或构造并排(可读性差,不提议)

7、标识高宽比没法小于19px
处理方式:overflow: hidden;

8、左浮元素margin-bottom无效
处理方式:显示信息设定高宽比 or 父标识设定_padding-bottom替代子标识的margin-bottom or 再放个标识让父标识波动,子标识
margin- bottom,即(margin-bottom与float不一样时功效于1个标识)

9、img于块元素中,底边多出空白
处理方式:父级设定overflow: hidden; 或 img { display: block; } 或 _margin: ⑸px;

10、li之间会有间隔
处理方式:float: left;

11、块元素中有文本及右波动的行元素,行元素换行
处理方式:将行元素置于块元素内的文本前

12、position下的left,bottom移位
处理方式:为父级(relative层)设定宽高或加上*zoom:1

13、子级中有设定position,则父级overflow无效
处理方式:为父级设定position:relative

下列是填补:上面要先看

1、终极方式:标准注解
<!--[if lte IE 6]> 这段文本仅显示信息在 IE6及IE6下列版本号。 <![endif]-->
<!--[if gte IE 6]> 这段文本仅显示信息在 IE6及IE6以上版本号。 <![endif]-->
<!--[if gt IE 6]> 这段文本仅显示信息在 IE6以上版本号(不包括IE6)。 <![endif]-->
<!--[if IE 5.5]> 这段文本仅显示信息在 IE5.5。 <![endif]-->
<!--在 IE6及IE6下列版本号中载入css-->
<!--[if lte IE 6]> <link type="text/css" rel="stylesheet" href="css/ie6.css" mce_href="css/ie6.css" /><![endif]-->
缺陷是在IE访问器下将会会提升附加的HTTP恳求数。

2、CSS挑选器区别
IE6不适用子挑选器;先对于IE6应用基本声明CSS挑选器,随后再用子挑选器对于IE7+及别的访问器。

拷贝编码
编码以下:

/* IE6 专用 */
.content {color:red;}
/* 别的访问器 */
div>p .content {color:blue;} -->

3、PNG半全透明照片的难题
尽管能够根据JS等方法处理,但仍然存在加载速率等难题,因此,这个在设计方案上能防止還是尽可能防止为好。以做到网站最大提升。
4、IE6下的圆角
IE6不适用CSS3的圆角特性,性价比最高的处理方式便是用照片圆角来取代,或舍弃IE6的圆角。

5、IE6情况闪动
假如你给连接、按钮用CSS sprites做为情况,你将会会发如今IE6下会有情况图闪动的状况。导致这个的缘故是因为IE6沒有将情况图缓存文件,每次开启hover的情况下都会再次载入,能够用JavaScript设定IE6缓存文件这些照片:

拷贝编码
编码以下:

document.execCommand("BackgroundImageCache",false,true);

6、最少高宽比
IE6 不适用min-height特性,但它却觉得height便是最少高宽比。处理方式:应用ie6不适用但其余访问器适用的特性!important。

拷贝编码
编码以下:

#container {min-height:200px; height:auto !important; height:200px;}

7、最大高宽比

拷贝编码
编码以下:

//立即应用ID来更改元素的最大高宽比
var container = document.getElementById('container');
container.style.height = (container.scrollHeight > 199) ? "200px" : "auto";
//写成涵数来运作
function setMaxHeight(elementId, height){
var container = document.getElementById(elementId);
container.style.height = (container.scrollHeight > (height - 1)) ? height + "px" : "auto";
}
//涵数示例
setMaxHeight('container1', 200);
setMaxHeight('container2', 500);

8、100% 高宽比
在IE6下,假如要给元素界定100%高宽比,务必要确立界定它的父级元素的高宽比,假如你必须给元素界定满屏的高宽比,就得先给html和body界定height:100%;。

9、最少宽度
同max-height和max-width1样,IE6也不适用min-width。

拷贝编码
编码以下:

//立即应用ID来更改元素的最少宽度
var container = document.getElementById('container');
container.style.width = (container.clientWidth < width) ? "500px" : "auto";
//写成涵数来运作
function setMinWidth(elementId, width){
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth < width) ? width + "px" : "auto";
}
//涵数示例
setMinWidth('container1', 200);
setMinWidth('container2', 500);

10、最大宽度

拷贝编码
编码以下:

//立即应用ID来更改元素的最大宽度
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";
//写成涵数来运作
function setMaxWidth(elementId, width){
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";
}
//涵数示例
setMaxWidth('container1', 200);
setMaxWidth('container2', 500);

11、双边距Bug
当元素波动时,IE6会不正确的把波动方位的margin值双倍测算。本人感觉较好处理方式是防止float和margin另外应用。

12、消除波动
假如你想用div(或别的器皿)包裹1个波动的元素,你会发现务必给div(器皿)界定确立的height、width、overflow当中1个特性(除auto值)才可以将波动元素严密地包裹。

拷贝编码
编码以下:

#container {border:1px solid #333; overflow:auto; height:100%;}
#floated1 {float:left; height:300px; width:200px; background:#00F;}
#floated2 {float:right; height:400px; width:200px; background:#F0F;}
更多:http://www.twinsenliang.net/skill/20090413.html

13、波动层移位
当內容超过外宽容器界定的宽度时,在IE6中器皿会忽略界定的width值,宽度会不正确地随內容宽度提高而提高。
波动层移位难题在IE6下沒有真实令人令人满意的处理方式,尽管可使用overflow:hidden;或overflow:scroll;来调整, 但hidden非常容易致使别的1些难题,scroll会破坏设计方案;JavaScript也无法很好地处理这个难题。因此提议是1定要在合理布局上防止这个难题发 生,应用1个固定不动的合理布局或操纵好內容的宽度(给里层加width)。

14、躲猫猫bug
在IE6和IE7下,躲猫猫bug是1个十分恼人的难题。1个撑破了器皿的波动元素,假如在他以后有不波动的內容,而且有1些界定了:hover的连接,当电脑鼠标移到那些连接上时,在IE6下就会开启躲猫猫。
处理方式很简易:
1.在(那个未波动的)內容以后加上1个<span style="clear: both;"> </span>
2.开启包括了这些连接的器皿的hasLayout,1个简易的方式便是给其界定height:1%;

15、肯定精准定位元素的1像素间隔bug
IE6下的这个不正确是因为进位解决偏差导致(IE7已修补),当肯定精准定位元素的父元素高或宽为单数时,bottom和right会造成不正确。唯1的处理方法便是给父元素界定确立的高宽值,但针对液态合理布局沒有完善的处理方式。

16、3像素间隔bug
在IE6中,当文字(或无波动元素)跟在1个波动的元素以后,文字和这个波动元素之间会多出3像素的间距。
给波动层加上 display:inline 和 ⑶px 负值margin
给正中间的內容层界定 margin-right 以改正⑶px

17、IE下z-index的bug
在IE访问器中,精准定位元素的z-index等级是相对各有的父级器皿,因此会致使z-index出現不正确的主要表现。处理方式是给其父级元素界定z-index,一些状况下还必须界定position:relative。

18、Overflow Bug
在IE6/7中,overflow没法正确的掩藏有相对性精准定位position:relative;的子元素。处理方式便是给外宽容器.wrap再加position:relative;。

19、横向目录宽度bug
假如你应用float:left;把<li>横向摆列,而且<li>内包括的<a>(或别的)开启了 hasLayout,在IE6下就会有不正确的主要表现。处理方式很简易,只必须给<a>界定一样的float:left;便可。

20、目录阶梯bug
目录阶梯bug一般会在给<li>的子元素<a>应用float:left;时开启,大家原意是要做1个横向的目录(一般 是导航栏栏),但IE却将会展现出竖直的或阶梯状。处理方法便是给<li>界定float:left;而非子元素<a>,或 给<li>界定display:inline;还可以处理。

21、竖直目录空隙bug
当大家应用<li> 包括1个块级子元素时,IE6(IE7也是有将会)会不正确地给每条目录元素(<li>)之间加上间隙。
处理方式:把<a>flaot而且消除float来处理这个难题;此外1个方法便是开启<a>的hasLayout(如定 义高宽、应用zoom:1;);还可以给<li> 界定display:inline;来处理此难题;此外也有1个极趣味的方式,给包括的文字结尾加上1个空格。

22、IE6中的:hover
在IE6中,除(必须有href特性)才可以开启:hover个人行为,这防碍了大家完成很多电脑鼠标碰触实际效果,但還是有1些方法是能够处理它的。最好是是不必用:hover来完成关键的作用,仅仅只用它来强化实际效果。

23、IE6调剂对话框尺寸的 Bug
当把body垂直居中置放,更改IE访问器尺寸的情况下,任在哪body里边的相对性精准定位元素都会固定不动没动了。处理方法:给body界定position:relative;就可以了。

24、文字反复Bug
在IE6中,1些掩藏的元素(如注解、display:none;的元素)被包括在1个波动元素里,就有将会引起文字反复bug。处理方法:给波动元素加上display:inline;。