10個技巧幫你搞定IE 6

2022-09-25 11:54:10 字數 2293 閱讀 4065

但對於整個網際網路,ie6仍然是使用者最多的瀏覽器。暫不說ie6怎樣,把web的表現做得更好,既是一種責任,也是一種能力的表現。如果你依然對ie6所出現的種種問題無可奈何,就讓我帶你來看一下來自sitepoint的 10 fixes that solve ie6 problems,學會這10個方法,你將可以解決大部分ie6出現的問題。

1. 使用 doctype

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

複製**

**如下:

br />"">

或者, xhtml頁面的!doctype:

複製**

**如下:

br />"">

你最不想看到的是,ie6進入怪癖模式 – 其實已經夠多怪癖了。

2. 設定position: relative

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

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

這源於著名的ie6雙倍外邊距bug,例如,你給乙個div設計了浮動,並且,設定了margin-left:5px;,在ie6中很可能就是margin-left:10px了,這裡,給浮動元素設定 display:inline;,即可解決問題。

4. 為元素設定 haslayout

很多ie6(或ie7)的問題可以用設定haslayout值的方法來解決。(如果你不知道haslayout是什麼,請看這裡)

最簡單的給元素設定haslayoutwww.cppcns.com值的方法是給加上css 的height或width(當然,zoom也可以用,但這不是css的一部分)。設定乙個具體的值是推薦的,但有時候並不一定知道高度多少,這裡,你可能會用到height:1%。如果父元素沒有設定高度,那麼元素的物理高度並不會改變,但是,已經具備haslayout屬性。

5. 解決字元重複出現的問題

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

確保浮動元素設定了 display:inline;

在浮動元素中使用 margin-right:-3px;

在浮動元素的最後乙個元素後加上乙個ie注釋,例如:

在最後的元素中加上乙個div(這以設定width 為90% 或者其他相似的高度)

update: 最簡單的方法是刪除掉所有注釋。(感謝恬瑋兒的提示,我自己並沒有遇到過,不過,google了一下,發現這個方法也可程式設計客棧以解決,並且,這是值得推薦的乙個方法。)

你可以到positioniseverything.net中jvytt檢視更多關於這個的解釋。

6.只在標籤中使用hover,ie6只支援標籤顯示hover樣式

當然,你還是可以通過js來解決這個方法。但是, 這關於到可訪問性的問題。建議不要把重要的內容設定在利用js來實現的hover中。

7. 使用!impor 或高階選擇器來區分ie瀏覽器

比如min-height可以避免使用css來實現對ie的相容。

複製www.cppcns.com**

**如下:

#element

ie6 並不能正確地識別min-height,可以設定固定的高度,讓ie6解析為20em。即使如此,它還是會因為內容的尺寸擴大而改變高度。而另乙個方法是使用高階選擇器:

複製**

**如下:

#element

/* 忽略 ie6 */

#element[id]

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

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

複製**

**如下:

body

9. 盡早測試,經常測試

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

10. 重構你的**

很多情況下,解決乙個問題,可能比重構你的**要花更多的時間。比如上一次給公司寫乙個頻道頁面的,沒有一邊製作,一邊測試ie6的表現,導致最近有很多奇怪的問題,因為布局比較複雜。後來,乾脆重構**。用了2天。我想,如果是想解決方法,或許2天都搞不定。

本文標題: 10個技巧幫你搞定ie 6

本文位址:

常用的相容IE6及小技巧

由於各大主流瀏覽器由不同的廠家開發,所用的核心架構和 也很難重和,這就為各種莫名其妙的bug 錯誤 提供了溫床。再加上各大廠商出於自身利益考慮而設定的種種技術壁壘,都讓css應用起來比想象得要麻煩。瀏覽器的相容問題是我們必須去克服的。主流瀏覽器 瀏覽器中文名核心 internet explorer ...

乙個IE6下重複載入的BUG

上週接到乙個需求,有人反饋 的搜尋結果頁會對某些資源檔案進行重複不停地重新載入,問題嚴重。經過一系列排查,最終發現問題所在 ie6在window.onload 或模擬的domready 時執行指令碼,會引發一些cache的問題 問題1 test 背景圖會被重複載入 問題2 test 佔位圖會被載入三...

PHP指令碼的10個技巧 6

php和com 如果你是一名冒險份子,而且你正在使用cgi isapi或apache模組版本的windows系統上執行著php,那麼你也可以獲得系統的com功能。現在,解釋com 微軟的元件物件模型 的工作留給了微軟和那些大部頭的圖書來完成。然而,知道點com也沒什麼錯,下面有乙個普通的 沒有雙關語...