您好,登錄后才能下訂單哦!
IE6中常見CSS兼容性解決技巧是怎樣的,相信很多沒有經(jīng)驗(yàn)的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。
IE6瀏覽器目前的市場份額仍然很高,因此作為網(wǎng)頁前端開發(fā)來說,無可避免的必須兼容IE6瀏覽器,這里將給大家介紹10種在IE6瀏覽器中常見的CSS兼容性問題,以及相關(guān)的解決方法。
51CTO推薦閱讀:Javascript解決常見瀏覽器兼容問題
1、使用一個聲明
你必須經(jīng)常在HTML網(wǎng)頁頭部放置一個聲明,推薦使用嚴(yán)格的標(biāo)準(zhǔn)。同時(shí)需要是IE6進(jìn)入兼容模式,這已經(jīng)足夠兼容的了。
2、使用position: relative
設(shè)置一個標(biāo)簽position: relative可以解決很多問題,特別是曾經(jīng)有過看不見的經(jīng)歷或者奇怪布局的框架。明顯的,你需要小心,絕對位置放置的子元素是否都參照找到新位置。
3、為浮動元素使用display:inline
浮動元素會有一個著名的IE6雙邊距margin bug。假如你設(shè)置了左邊距5px但實(shí)際上得到了10px左邊距。display:inline可以解決這個問題,盡管它不是必需的,但是CSS仍然有效。
4、設(shè)置元素啟動hasLayout
大部分IE6(IE7)的渲染問題都可以通過起來元素的hasLayout屬性來兼容。這是IE內(nèi)置的設(shè)定,確定一個內(nèi)容塊相對其它內(nèi)容塊是有界限和位置的。當(dāng)你需要設(shè)置一個行內(nèi)元素例如一個連接變成塊狀元素或者是透明效果,設(shè)置hasLayout也是必須的。
5、修復(fù)重復(fù)字符的bug
復(fù)雜的布局會觸發(fā)一個bug:浮動對象的***字符會出現(xiàn)在已經(jīng)清除浮動的元素后面。這里有幾種解決的辦法,部分是理想的,并且一些測試和出錯是必須的。
◆確保浮動元素都使用:display:inline;
◆***一個浮動元素使用margin-right:-3px;
◆在浮動對象***一個元素后使用一個條件注釋。例如這里輸入注釋…<![endif];
◆在容器內(nèi)的***使用一個div空標(biāo)簽(它也必須設(shè)置90%寬度甚至更?。?。
6、使用a標(biāo)簽完成可點(diǎn)擊和hover原理
IE6只支持a標(biāo)簽的CSS定義hover效果,你可以使用它去控制javascript啟動的widgets,使得他們?nèi)匀槐3宙I盤操作。這里有個二擇一的問題,但是a標(biāo)簽是所有解決方案中最可靠的。IE6不支持“min-height”并且錯誤的將20em重寫為“auto”。不過,當(dāng)內(nèi)容大于設(shè)置的空間時(shí),它會增加它的尺寸。另外一個選擇是使用高級選擇符。例如:
#element { min-height: 20em; height: 20em; } /* ignored by IE6 */ #element[id] { height: auto; }
7、使用!important,或是高級選擇符替代IE特定代碼
在外置的CSS文件里,放棄憑借傳統(tǒng)的hacks和條件判斷,使用有效的CSS代碼去針對IE6仍然是有可能的。例如:最小高度可以使用一下定義。
#element { min-height: 20em; height: auto !important; /* understood by all browsers */ height: 20em; /* IE6 incorrectly uses this value /* }
8、避免百分比定義
百分比在IE下比較混亂。除非你非常小心每個父元素的尺寸,這樣就大概可以***避免了。你仍然可以對其他瀏覽器使用!important來使用百分值。例如:
body { margin: 2% 0 !important; margin: 20px 0; /* IE6 only */ }
9、早點(diǎn)和經(jīng)常測試
在你的網(wǎng)站和應(yīng)用程序完成之前,不要放棄IE6的測試。問題將會更加嚴(yán)重并且需要很長時(shí)間去修復(fù)。如果你的網(wǎng)站可以運(yùn)行于FireFox和IE6,它將差不多肯定可以在其它瀏覽器下運(yùn)行。
10、重構(gòu)你的代碼
經(jīng)常的,修復(fù)會比重新考慮布局問題更加花費(fèi)時(shí)間。Html細(xì)微的修改和更加簡單的CSS經(jīng)常是最有效的。這意味著你要放棄***的合法的代碼,但是將會更少的問題出現(xiàn),并且你知道怎樣處理將要出現(xiàn)的情況。
看完上述內(nèi)容,你們掌握IE6中常見CSS兼容性解決技巧是怎樣的的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。