随时随地都能C的学校教师,欲乱生活1一100小说,自由管剪辑中国的

build網(wǎng)站制作

【ie6】網(wǎng)頁排版應(yīng)該考慮IE6的兼容性問題當(dāng)前位置：首頁>主要服務(wù)>網(wǎng)站制作>html

網(wǎng)頁排版應(yīng)該考慮IE6的兼容性問題

IE6占據(jù)百分之40多。雖然瀏覽器的種類很多，光一個IE就有IE5.5,IE6,IE7,IE8等多版本，在這眾多的高版本中，IE6依然受大多數(shù)用戶所喜歡，所以排版時候就不的不去考慮IE6的兼容問題，要不然會損失很多訪問者。

下面列舉IE6中10個不得不注意的問題：

1. 使用 DOCTYPE

你需要在HTML頁面的最頂部加上DOCTYPE類型，當(dāng)然， 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進入怪癖模式 – 其實已經(jīng)夠多怪癖了。

2. 設(shè)置position: relative

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

3. 給浮動元素設(shè)置 display:inline 值

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

4. 為元素設(shè)置 hasLayout

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

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

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

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

?確保浮動元素設(shè)置了 display:inline;

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

?在浮動元素的最后一個元素后加上一個IE注釋，例如：

?在最后的元素中加上一個DIV(這以設(shè)置width 為90% 或者其他相似的高度)

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

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

6. 只在<a>標(biāo)簽中使用hover，IE6只支持<a>標(biāo)簽顯示hover樣式

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

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

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