10个技能帮你搞定IE 6

2021-03-12 11:38 jianzhan
但针对全部互联网技术,IE6依然是客户数最多的访问器。暂不说IE6如何,把Web的主要表现做得更好,既是1种义务,也是1种工作能力的主要表现。假如你仍然对IE6所出現的种种难题没法怎奈,就让我带你看来1下来自SitePoint的 10 Fixes That Solve IE6 Problems,学会这10个方式,你将能够处理绝大多数IE6出現的难题。

1. 应用 DOCTYPE
你必须在HTML网页页面的最顶部再加DOCTYPE种类,自然, strict版是值得强烈推荐的,比如:

拷贝编码
编码以下:

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


或, XHTML网页页面的!DOCTYPE:

拷贝编码
编码以下:

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

你最不想看到的是,IE6进到怪癖方式 – 实际上早已够多怪癖了。
2. 设定position: relative
设定position:relative处理了不止1个难题,非常当必须设定对齐的情况下。很显著,你必须搞清楚的1点是,肯定精准定位是相对性来讲的。说不确定,由于你沒有设定,而不知道道物品都飞到那去了。例如,你设计方案了每篇文章内容前都有1张照片,最终,你发现,仅有1张照片在网页页面上,也许,是她们重合了。

3. 给波动元素设定 display:inline 值
这源于知名的IE6双倍外边距BUG,比如,你给1个DIV设计方案了波动,而且,设定了margin-left:5px;,在IE6中极可能便是margin-left:10px了,这里,给波动元素设定 display:inline;,便可处理难题。

4. 为元素设定 hasLayout
许多IE6(或IE7)的难题能够用设定hasLayout值的方式来处理。(假如你不知道道hasLayout是甚么,请看这里)

最简易的给元素设定hasLayout值的方式是给再加CSS 的height或width(自然,zoom还可以用,但这并不是CSS的1一部分)。设定1个实际的值是强烈推荐的,但有时其实不1定了解高宽比是多少,这里,你将会会用到height:1%。假如父元素沒有设定高宽比,那末元素的物理学高宽比其实不会更改,可是,早已具有hasLayout特性。

5. 处理标识符反复出現的难题
繁杂的合理布局将会致使1些波动元素里边的文本,出現在清除波动部位的下面。这是1个怪异的难题,下面这此能够帮你处理:

保证波动元素设定了 display:inline;
在波动元素中应用 margin-right:⑶px;
在波动元素的最终1个元素后再加1个IE注解,比如: <!--[if !IE]>把你的注解放这里… <![endif]-->
在最终的元素中再加1个DIV(这以设定width 为90% 或别的类似的高宽比)
UPDATE: 最简易的方式是删掉掉全部注解。(谢谢恬玮儿的提醒,我自身并沒有遇到过,但是,google了1下,发现这个方式还可以处理,而且,这是值得强烈推荐的1个方式。)

你能够到positioniseverything.net中查询更多有关这个的解释。

6.只在<a>标识中应用hover,IE6只适用<a>标识显示信息hover款式
自然,你還是能够根据JS来处理这个方式。可是, 这有关到可浏览性的难题。提议不必把关键的內容设定在运用JS来完成的hover中。

7. 应用!important 或高級挑选器来区别IE访问器
例如min-height能够防止应用CSS来完成对IE的适配。


拷贝编码
编码以下:

#element {
min-height: 20em;
height: auto !important;
height: 20em; /* 让IE6显示信息这个高宽比 */
}

IE6 其实不能正确地鉴别min-height,能够设定固定不动的高宽比,让IE6分析为20em。即便这般,它還是会由于內容的规格扩张而更改高宽比。而另外一个方式是应用高級挑选器:

拷贝编码
编码以下:

#element {
min-height: 20em;
height: 20em;
}
/* 忽视 IE6 */
#element[id] {
height: auto;
}

8. 防止按占比明确的规格
占比会让IE6变得紊乱,除非你给父元素加上1个准确的高宽比。要不然,给别的的再加!important,比如:

拷贝编码
编码以下:

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

9. 尽快检测,常常检测
别忘掉尽快检测,常常检测, 除非你的水平早已进行。要不然,你将会花更多的時间来处理IE6的难题。1般状况下,假如你的网站能在IE6和firefox下优良主要表现,估算别的访问器就不容易有甚么大难题了。(最少我自身深有感触)

10. 重构你的编码
许多状况下,处理1个难题,将会比重构你的编码要花更多的時间。例如上1次给企业写1个频道网页页面的,沒有1边制做,1边检测IE6的主要表现,致使近期有许多怪异的难题,由于合理布局较为繁杂。后来,果断重构编码。用了2天。我想,假如是想处理方式,也许2天都搞不确定。