IE6常見的BUG
來源:易賢網(wǎng) 閱讀:815 次 日期:2015-04-16 16:29:40
溫馨提示:易賢網(wǎng)小編為您整理了“IE6常見的BUG”,方便廣大網(wǎng)友查閱!

1. 使用 DOCTYPE

你需要在HTML頁面的最頂部加上DOCTYPE類型,當然, strict版是值得推薦的,例如:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"">

或者, XHTML頁面的!DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"">2. 設置position: relative

設置position:relative解決了不止一個問題,特別當需要設置對齊的時候。很明顯,你需要明白的一點是,絕對定位是相對來說的。說不定,因為你沒有設置,而不知道東西都飛到那去了。比如,你設計了每篇文章前都有一張圖片,最后,你發(fā)現(xiàn),只有一張圖片在頁面上,或許,是他們重疊了。

3. 給浮動元素設置 display:inline 值

這源于著名的IE6雙倍外邊距BUG,例如,你給一個DIV設計了浮動,并且,設置了margin-left:5px;,在IE6中很可能就是margin-left:10px了,這里,給浮動元素設置display:inline;,即可解決問題。

4. 為元素設置 hasLayout

很多IE6(或IE7)的問題可以用設置hasLayout值的方法來解決。(如果你不知道hasLayout是什么,請看)

最簡單的給元素設置hasLayout值的方法是給加上CSS 的height或width(當然,zoom也可以用,但這不是CSS的一部分)。設置一個具體的值是推薦的,但有時候并不一定知道高度多少,這里,你可能會用到height:1%。如果父元素沒有設置高度,那么元素的物理高度并不會改變,但是,已經(jīng)具備hasLayout屬性。

5. 解決字符重復出現(xiàn)的問題

復雜的布局可能導致一些浮動元素里面的文字,出現(xiàn)在清理浮動位置的下面。這是一個奇怪的問題,下面這此可以幫你解決:

確保浮動元素設置了 display:inline;在浮動元素中使用 margin-right:-3px;在浮動元素的最后一個元素后加上一個IE注釋,例如: <!--[if !IE]>把你的注釋放這里…<![endif]–>在最后的元素中加上一個DIV(這以設置width 為90% 或者其他相似的高度)

UPDATE: 最簡單的方法是刪除掉所有注釋。(感謝的提示,我自己并沒有遇到過,不過,google了一下,發(fā)現(xiàn)這個方法也可以解決,并且,這是值得推薦的一個方法。)

你可以到positioniseverything.net中查看更多關于這個的解釋。

6.只在<a>標簽中使用hover,IE6只支持<a>標簽顯示hover樣式

當然,你還是可以通過JS來解決這個方法。但是, 這關于到可訪問性的問題。建議不要把重要的內(nèi)容設置在利用JS來實現(xiàn)的hover中。

7. 使用!important 或高級選擇器來區(qū)分IE瀏覽器

比如min-height可以避免使用CSS來實現(xiàn)對IE的兼容。

#element {

min-height: 20em;

height: auto !important;

height: 20em; /* 讓IE6顯示這個高度 */

}

IE6 并不能正確地識別min-height,可以設置固定的高度,讓IE6解析為20em。即使如此,它還是會因為內(nèi)容的尺寸擴大而改變高度。而另一個方法是使用高級選擇器:

#element {

min-height: 20em;

height: 20em;

}

/* 忽略 IE6 */

#element[id] {

height: auto;

}8. 避免按比例確定的尺寸

比例會讓IE6變得錯亂,除非你給父元素添加一個確切的高度。不然,給其他的加上!important,例如:

body{

margin: 2% 0 !important;

margin: 20px 0; /* IE6 可讀 */

}9. 盡早測試,經(jīng)常測試

別忘記盡早測試,經(jīng)常測試, 除非你的程度已經(jīng)完成。不然,你可能花更多的時間來解決IE6的問題。一般情況下,如果你的網(wǎng)站能在IE6和firefox下良好表現(xiàn),估計其他瀏覽器就不會有什么大問題了。(至少我自己深有體會)

10. 重構你的代碼

很多情況下,解決一個問題,可能比重構你的代碼要花更多的時間。比如上一次給公司寫一個頻道頁面的,沒有一邊制作,一邊測試IE6的表現(xiàn),導致最近有很多奇怪的問題,因為布局比較復雜。后來,干脆重構代碼。用了2天。我想,如果是想解決方法,或許2天都搞不定。

更多信息請查看IT技術專欄

更多信息請查看腳本欄目
易賢網(wǎng)手機網(wǎng)站地址:IE6常見的BUG

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:526150442(9:00—18:00)版權所有:易賢網(wǎng)