區(qū)分出IE6的hack寫法
1.區(qū)別IE6、7與FF/IE8：

引用
顯示效果：
IE 6/7：orange
FF/IE8:blue
原理：FF/IE8不支持*開頭，而IE6/7都支持。

2.區(qū)別IE6與IE7/IE8/FF：

引用
顯示效果：
IE7/8/FF：green
IE6:blue
原理：IE6支持下劃線"_"，IE7、8和firefox均不支持下劃線。

3.區(qū)別FF/IE8和IE6/7：

或者

引用
顯示效果：
IE6：blue
IE7：green
FF/IE8:orange
原理：IE6能識(shí)別-，IE7能識(shí)別+，IE8和FF都不能識(shí)別+和-
IE8/FF都不識(shí)別*，IE7優(yōu)先識(shí)別!important，IE6不能識(shí)別!important。

4.可同時(shí)區(qū)分IE8、IE7、IE6、Firefox的CSS hacks：

IE6兼容的一些額外需要考慮的細(xì)節(jié)：
1.position:fixed

對(duì)這個(gè)屬性印象深刻，每一次需要用到固定的時(shí)候，IE6總是蹦出來告訴你，我不支持position:fixed,你要對(duì)我特殊點(diǎn)，要么使用CSS表達(dá)式，要是時(shí)刻計(jì)算滾動(dòng)的高度，再加上position:absolute.

2.浮動(dòng)雙倍邊距

當(dāng)在浮動(dòng)中使用margin時(shí)，你要時(shí)刻記得加上display:inline,不然IE6不給你好臉色，總是會(huì)讓你布局錯(cuò)亂，就因?yàn)樗鼤?huì)是雙倍的邊距。

3.背景透明

之前總是用png8來兼容IE6，實(shí)在沒辦法時(shí)，你還要ps上下功夫，圖省事的話，你要加一個(gè)DD_belatedPNG.JS，各種技能層出不窮，但是都有一個(gè)就是耗時(shí)不討好。

4.max-height/min-height

想要給它一個(gè)最大尺寸或者最小尺寸時(shí)，IE6卻告訴你，我只能用確定尺寸，你需要的話，用表達(dá)式吧

5.IE6 點(diǎn)擊鏈接出現(xiàn)虛線

呵呵，產(chǎn)品說不去掉影響用戶體驗(yàn)，我只想說：用了IE6還談啥體驗(yàn)。

6.彈窗出現(xiàn)在select上要加個(gè)iframe

因?yàn)閟elect在IE6中是一個(gè)控件，層級(jí)比其他層高，所以如果彈窗要兼容IE6，背景記得加多一層iframe

7.尺寸超出會(huì)自動(dòng)延伸

假如你給某個(gè)層加了一個(gè)高度，當(dāng)內(nèi)容超出時(shí)，沒有overflow:hidden;時(shí)，IE6默認(rèn)會(huì)撐開，有時(shí)候會(huì)出現(xiàn)莫名布局錯(cuò)亂。

8.不能使用.class.class2

使用以上的css寫法在ie6中不識(shí)別，這導(dǎo)致了，很多時(shí)候你不得不改變重構(gòu)的策略，改用.class-class1的寫法。

9.盒子模型解析不一致

在Quirks Mode中，盒子的寬度計(jì)算與Standards Mode的不同

在 IE 盒模型中，
box width = content width + padding left + padding right + border left + border right，
box height = content height + padding top + padding bottom + border top + border bottom，
而在 W3C 標(biāo)準(zhǔn)的盒模型中，box 的大小就是 content 的大小。

最新評(píng)論