IE6 bug调整的10个小窍门 强烈推荐

2021-03-12 13:16 jianzhan

1. 应用DOCTYPE
你应当在1直每一个HTML文档的头顶部都应用DOCTYPE,而且大家强烈推荐应用strict 版本号,例如:

拷贝编码
编码以下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

或,针对XHTML应用:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

你必须解决的最繁杂的事儿便是IE6进到quirks方式——它早已够诡异了。

2. 设定position: relative
将1个元素设定为”position:relative”能够处理许多难题,非常是你以前遇到掩藏的或对齐诡异的盒子。明显,你必须十分当心点儿,由于肯定精准定位的子连接点将会会因而再次精准定位。

3. 将波动元素设定为display:inline
具备margin特性的波动元素将会引发知名的IE6双倍margin难题,例如,你为1个元素特定margin-left为5px,可是IE6中具体上却主要表现为10px。”display:inline”将处理这个难题,虽然这并不是务必的,你的CSS依然是合理的。

4. 将1个元素设定为hasLayout
许多IE6(和IE7)的3D渲染难题能够根据设定元素的hasLayout来处理。 这是1个IE內部特性(IE掩藏的,更多有关haslayout的材料,能够参考这里),用来明确相对别的元素,內容是怎样合理布局和精准定位的。假如你必须设定1个inline元素(例如1个连接)为block元素,或是运用全透明实际效果,设定hasLayout也将会是务必的。

最简易的设定hasLayout的方式是为CSS设定1个高宽比或宽度(zoom还可以用,可是zoom其实不是CSS规范的1一部分)。大家强烈推荐设定具体规格,可是难题是这是不实际的,你将会必须应用”height:1%”。假如父元素并沒有设定高宽比,该元素的具体高宽比其实不受危害,并且这个情况下hasLayout早已被开启。

5. 调整反复文本bug
繁杂的合理布局能够开启在波动元素的最终1些标识符将会出現在出現在消除元素下面的bug。这里有几个处理方式,一些是完善的,可是做1些不断实验也是务必的:

保证全部的元素应用”display:inline;”
在最终1个元素上应用1个”margin-right:⑶px;”
为波动元素的最终1个条目应用1个标准注解,例如:

拷贝编码
编码以下:

<!--[if !IE]>Put your commentary in here...<![endif]-->

在器皿的最终元素应用1个空的div(它也是有必要设定宽度为90%或相近宽度。)
浏览 positioniseverything.net 查询该难题的详细详细介绍。

6. 在可点一下和悬停的元素上只应用<a>标识
IE6只了解对a标识的CSS hover实际效果。

你还可以在根据JavaScript的组件内应用她们来操纵,以使她们维持电脑键盘的可实际操作性。是有1些可取代的挑选,可是<a>标识比其它计划方案更靠谱。

7. 应用!important 或高級挑选器来区别IE6
不应用传统式Hack或在附加文档中的标准CSS的方式,写出非常对于IE6的可行的编码也還是有将会的。例如最少高宽比能够根据这段编码来界定:

拷贝编码
编码以下:

#element {
min-height: 20em;
height: auto !important; /* 全部访问器都了解这段编码 */
height: 20em; /* IE6 不正确的应用这个值 /*
}

IE6 没理解min-height并不正确的用20em遮盖”auto”高宽比,可是,假如內容必须更多的室内空间的话,它会全自动提升高宽比。

此外1个可选的方式是应用高級挑选器,例如e.g.

拷贝编码
编码以下:

#element {
min-height: 20em;
height: 20em;
}
/* IE6 疏忽下面的编码*/
#element[id] {
height: auto;
}

8. 防止百分比企业
百分比会把IE搞胡涂的。除非你能够准确的操纵每个父元素的尺寸,才将会保证最好防止。你能够根据!important在别的访问器中再次应用百分比,例如:

拷贝编码
编码以下:

body {
margin: 2% 0 !important;
margin: 20px 0; /* IE6 only */
}

9. 尽快检测其实不断检测
不必直到你的网站或运用进行了才检测IE6;这样的话难题将会更不尽人意,并且会花更多時间来调整。假如你的网站可以在Firefox和IE6中一切正常运作,那末1般在其它访问器就不容易有难题。

10. 重构你的编码
常常产生的事儿是,调整bug要比再次考虑到1个合理布局难题要花更长的時间。对HTML做些小修改和1些简易的CSS经常更合理。这将会代表着你要舍弃完善的编码,可是会出現较少的长期性难题并且未来你会很清晰假如解决这些将会出現的难题。

神飞感言,尽管IE8并沒有从压根上更改IE,可是它对CSS规范的适用确实有十分大的改观。可是就算这般,大家仍然不可以寄期待与IE8的普及,这是1件很不可靠的事儿,难除的IE6客户不一定会接纳IE8。因此大家近期1年半载還是不可以疏忽IE6。

假如你有其它较为好的能够处理IE6的bug的好方式或技能,别忘了告知前端开发观查哦~