IE6 瀏覽器常見相容問題大彙總（23個）

阿新 • • 發佈：2019-01-20

IE6以及各個瀏覽器常見相容問題大彙總

綜述：雖然說IE6在2014年4月將被停止支援，但是不得不說的是，IE6的市場並不會隨著支援的停止而立刻消散下去，對於WEB前端開發工程師來說，相容IE6 相容各個瀏覽器，依然是不得不面對的工作。

在此總結了常見的瀏覽器相容問題，裡面也有IE6的常見相容問題，供大家分享。

1.<!DOCTYPE HTML>文件型別的宣告。

產生條件：IE6瀏覽器，當我們沒有書寫這個文件宣告的時候，會觸發IE6瀏覽器的怪異解析現象；

解決辦法：書寫文件宣告。

2.不同瀏覽器當中，很多的標籤的預設樣式不同，如預設的外部丁內補丁。

產生條件：不同瀏覽器；

解決辦法：利用

CSS reset檔案進行樣式的清除，然後再根據需要進行設定。

html { font-family:"微軟雅黑",Arial,sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,button,textarea,p,th,td { padding:0;margin:0;font-family:Microsoft YaHei,sans-serif,Arial}table { border-collapse:collapse;border-spacing:0}fieldset,img { border:0}

a { text-decoration:none;color:#000;outline:none}li { list-style:none}caption,th { text-align:left}h1,h2,h3,h4,h5,h6 { font-size:100%;font-weight:normal}input,button,textarea,select,optgroup,option { font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}input,button,textarea,select { *

font-size:100%}a { -webkit-transition:all 0.5s linear;-moz-transition:all 0.5s linear;-ms-transition:all 0.5s linear;-o-transition:all 0.5s linear}

為防止不同瀏覽器預設樣式對於網頁佈局樣式造成的影響，通常我們在HTML檔案的頭部引入上面這段重置程式碼，將一些瀏覽器所不同的樣式以及部分標籤的預設樣式清除掉。

3.橫向雙倍外邊距

產生條件：在IE6中塊元素浮動後，會出現橫向雙倍margin現象。

解決辦法：在float標籤的樣式控制中加入display：inline

IE6存在不少的相容問題，今天要說的是IE6 的橫向雙倍外邊距

橫向雙倍外邊距的觸發條件：

當浮動元素的浮動方向和浮動邊界的方向一致。此時用IE6檢視網頁，就會發現，設定的橫向的邊距變成了雙倍。

如：元素向左浮動並且設定了左側的外邊距出現了這樣的雙邊距bug。同理，元素向右浮動並且設定右邊距也會出現同樣的情況。同一行如果有多個浮動元素，第一個浮動元素會出現這個雙邊距bug，其它的浮動元素則不會。

那麼，如何修正這個IE6下的橫向雙倍外邊距的Bug呢？

只需要給浮動元素加上display:inline;的CSS屬性就可以了。

4.預設行高

產生條件：IE6、IE7、遨遊瀏覽器；設定的文字高度超出盒模型內容區域設定的高度時會影響佈局。

解決辦法：給超出高度的標籤設定overflow：hidden；或者將文字的行高line-height設定為小於塊的高度。

5.img外部的border

產生條件：img外部有a標籤，即img標籤有連結時

解決辦法：設定img邊框border:0;

6.圖片預設有間距。

產生條件：img標籤（每個img之後敲了回車）

解決辦法：為img設定float的浮動佈局方式。

7.經典3畫素bug

產生條件：IE6瀏覽器，浮動塊元素與未浮動塊元素處於同一行，有預設的3px間距。

解決辦法：設定非浮動元素浮動。

8.預設行高

產生條件：清除浮動的時候，有些人會採取一種清浮動的方法，使用一個空的div，然後為這個div設定{clear：both}。在大部分瀏覽器當中，這樣做是沒有任何問題的，但是在IE6瀏覽器當中，div即使是空的，也會存在預設行高。

解決辦法：設定其高度為0，並設定overflow:hidden。{height:0;overflow:hidden;clear:both;}

選擇清浮動位置時應注意以下：1、清浮動一定要在浮動標籤完成浮動佈局以後新增，否則會影響到浮動標籤佈局；2、清除浮動必須與前面的標籤屬於同級關係。

①clear屬性定義了元素某個方向上不允許出現浮動元素：none（允許兩邊都可以有浮動物件）/left（…）/right（不允許右邊有浮動物件）/both（不允許有浮動物件）;

②空標籤清除浮動：在HTML頁面中加入一個空標籤用來清除浮動。

HTML：<div class="clear"> </div>

CSS:.clear{clear:both;hegiht:0;overflow:hidden;}

clear:both;是清除所有浮動；height:0;overflow:hidden;是用來改變IE6下標籤有預設的低於10px的行高時將以10px的高度顯示的bug。

但是空標籤清浮動會增加多餘的程式碼。

③overflow：在需要清除浮動的腹肌標籤中加入overflow即可，在IE6中不認識此屬性則加入zoom：1；或者height：1%；css樣式改為：.out{overflow:auto;zoom:1;}該屬性對於父標籤設定的高度小於子標籤時，IE6/7、遨遊則以下拉框形式出現，而火狐、谷歌、歐鵬、IE8會將子標籤超出部分隱藏掉。

overflow:visible屬性只能對IE6/7、遨遊起作用，對火狐、谷歌、歐鵬、IE8無清浮作用。

overflow:visible(不剪下內容也不新增滾動條)/auto（是body物件和textarea的預設值，在需要時剪下內容並新增滾動條）/hidden（超出部分隱藏）/scroll（總是顯示滾動條）;

④after清浮動：css樣式為：

.out{zoom:1;}/*==for IE6/7 Maxthon2==*/

outer:after {clear:both;content:"";visible:hidden;display:block;}/*==for FF/chrome/opera/IE8==*/

其中clear:both;只清除所有浮動；content:"";display:block;對於FF/chrome/opera/IE8不能缺少，content（）可以取空值。

⑤子標籤浮動時，給父標籤浮動

⑥下一標籤直接清浮動：兄弟標籤浮動時，下一標籤直接寫入清除clear：both；就可以。

⑦使用position：absolute；清除浮動。

9.a標籤hover不適用於所有標籤

產生條件：IE6瀏覽器中hover只支援a標籤的使用，不支援一切其它標籤使用；

解決辦法：合理用a標籤巢狀其他行內標籤或者用javascript模擬a的hover效果；詳情請檢視日誌：相容IE6 a標籤hover效果

<!DOCYTPE HTML><html><head><meta charset="utf-8"><title>測試1</title><style>*{margin: 0px;padding: 0px;list-style: none;}ul{margin: 20px auto;width: 350px;height: 270px;background: #fcc;}h3{display: inline;}a{float: left;width: 350px;height: 35px;margin-bottom: 5px;background: red;}a:hover{background: yellow;

zoom:1;height:60px;}a:hover b,a:hover h3,a:hover span{display: none;}</style></head><body><ul><li><a href=""><h3>尹小芃呆呆</h3><span>世說新語</span></a></li><li><a href=""><h3>尹小芃呆呆</h3><span>世說新語</span></a></li><li><a href=""><h3>尹小芃呆呆</h3><span>世說新語</span></a></li><li><a href=""><h3>尹小芃呆呆</h3><span>世說新語</span></a></li><li><a href=""><h3>尹小芃呆呆</h3><span>世說新語</span></a></li><li><a href=""><h3>尹小芃呆呆</h3><span>世說新語</span></a></li></ul></body></html>

原效果

滑鼠放上去的效果

a{float:left}將a標籤轉化成塊元素，這樣可以設定寬和高。

a:hover b{}當滑鼠放在a標籤上時，只是將a標籤的b的內容隱藏掉，而不是將a隱藏掉。如果將a標籤隱藏掉的，hover效果將消失，使display:none;失效。

10.table標籤當中border-color屬性設定無效

產生條件：IE6中table設定屬性border-color無效；

解決辦法：運用CSS樣式進行控制，而不是使用屬性進行樣式的處理。

11.png格式圖片

產生條件：IE6瀏覽器，不支援透明；

解決辦法：使用javascript進行處理；或者使用gif、jpg影象替代掉png圖片的使用。

12.透明rgba與opacity

產生條件：IE6不支援此兩種透明的設定方法；

解決辦法：使用IE6當中的濾鏡filter替代掉，如：opacity:0.6;filter:alpha(opacity=60)。

13.子選擇器在IE6中不能使用

產生條件：IE6瀏覽器，使用E>F子選擇器；

解決辦法：採用其他選擇器或者採用後代選擇器進行控制，如：div p{margin:10px;} div p p{margin:0;}替代掉 div>p{margin:10px;}。

14.不支援最大最小寬高

產生條件：IE6瀏覽器，標籤的最低高度/寬度設定（min/max-height）

解決辦法：為IE6單獨設定hack，即_height:最小高度值；_width：最小寬度值（對於IE6，當實際寬高超出定義的寬高時，元素會自動調整寬高）。對於最大高度和最大寬度，沒有必要設定相容，當前對於開發者來說，只需要保證IE6下正常顯示即可，無需在它身上花費太多功夫。

15.縱向居中，IE6不支援display:table-cell

產生條件：IE6瀏覽器，設定一個元素在另一個元素中垂直方向上居中對齊，不能夠支援以單元格的方式來顯示元素；

解決辦法：如果是單行文字，採用line-height和height的配合使得文字垂直居中，如果中間是其他元素或者多行文字，採用其他方法進行居中處理，處理方法有多種，詳見日誌：CSS元素水平垂直居中。

<!doctype html><html><head> <meta charset='utf-8' /> <title></title> <style type="text/css"> .out{width:400px;height:300px;margin:20px auto;display:table-cell;text-align:center;vertical-align:middle;background:#ccc;} .out img{width:100px;height:100px;background:#fcc;} </style></head><body> <div class='out'> <img src="" alt="" /> </div></body></html>

其他的CSS實現垂直居中的方法

A 在 content 元素外插入一個 div。設定此 div height:50%; margin-bottom:-contentheight;。

content 清除浮動，並顯示在中間。

優點：適用於所有瀏覽器；沒有足夠空間時(例如：視窗縮小) content 不會被截斷，滾動條出現

缺點：唯一我能想到的就是需要額外的空元素了

#floater{float:left; height:50%; margin-bottom:-120px;}#content{clear:both; height:240px; position:relative;}

<div id="floater"></div><div id="content"> Content here</div>

B 使用了一個 position:absolute，有固定寬度和高度的 div。這個 div 被設定為 top:0; bottom:0;。但是因為它有固定高度，其實並不能和上下都間距為 0，因此 margin:auto; 會使它居中。使用 margin:auto;使塊級元素垂直居中是很簡單的。優點：簡單；缺點：IE(IE8 beta)中無效；無足夠空間時，content 被截斷，但是不會有滾動條出現

<!doctype html><html><head> <title></title> <meta charset='utf-8' /> <style type="text/css">.outer{height:240px;width:500px;margin:20px auto 0;position:relative;background:#ccf;}.inner{width:300px;height:100px;background:#9f9;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;text-align: center;}.inner img{height:100px;} </style></head><body><div class="outer"><div class="inner"> <img src="bokan.png" alt="" /></div></div></body></html>

C 使用絕對定位的 div，把它的 top 設定為 50％，top margin 設定為負的 content 高度。這意味著物件必須在 CSS 中指定固定的高度。

因為有固定高度，或許你想給 content 指定 overflow:auto，這樣如果 content 太多的話，就會出現滾動條，以免content 溢位。

優點：適用於所有瀏覽器；不需要巢狀標籤。缺點：沒有足夠空間時，content 會消失(類似div 在 body 內，當用戶縮小瀏覽器視窗，滾動條不出現的情況)

.content { position:absolute; top:50%; height:240px; margin-top:-120px; /* negative half of the height */}

<div class="content"> Content goes here

</div>

16.input 聚焦框顏色與樣式不同

產生條件：各個瀏覽器表現不同；

處理方法：使用outline:none，清除預設樣式之後再統一設定。

17.滑鼠移上小手效果

產生條件：IE6，cursor:hand ：IE完全支援。但是在firefox是不支援的，沒有效果。cursor:pointer ：是CSS2.0的標準。所以firefox是支援的，但是IE5.0既之前版本不支援。IE6開始支援。；

解決辦法：設定兩種cursor:pointer ; cursor:hand。

18.子標籤無法撐開父標籤的高度

產生條件：父標籤內部含一個或多個子標籤，父標籤沒有設定浮動，而子標籤發生浮動；

處理方法：方法1：在子標籤最後新增清除浮動的設定<div style='height:0;clear:both'></div>;方法2：為父標籤新增{overflow:hidden;}的樣式；方法3：為父標籤設定固定高度。

19.li的間距問題

產生條件：IE6瀏覽器 li標籤設定寬高，且li裡面的元素髮生了浮動；

處理方法：方法1：li不設定寬高；方法2：li內部的標籤不進行浮動。

20.行內元素佈局混亂

產生條件：行內元素為包含框時，如果包含框包含的絕對定位元素以百分比為單位進行定位；

處理方法：在行內元素當中加入{zoom:1}，觸發IE的hasLayout。關於hasLayout的更多介紹請參見日誌：hasLayout IE瀏覽器bug的來源。

hasLayout是IE特有的一個屬性。很多的ie下的css bug都與其息息相關。在ie中，一個元素要麼自己對自身的內容進行計算大小和組織，要麼依賴於父元素來計算尺寸和組織內容。當一個元素的hasLayout屬性值為true時，它負責對自己和可能的後代元素進行尺寸計算和定位。雖然這意味著這個元素需要花更多的代價來維護自身和裡面的內容，而不是依賴於祖先元素來完成這些工作。

預設 hasLayout=true 的標籤：

很多情況下，把 hasLayout的狀態改成true 可以解決很大部分ie下顯示的bug。 hasLayout屬性不能直接設定，通過設定一些特定的css屬性來觸發並改變 hasLayout 狀態。

元素hasLayout而導致的問題其實一般都很容易發現：往往是內容出現錯位甚至完全不可見。

如：當一個元素內含浮動或絕對定位的內容時，它通常會表現出奇怪和錯誤的行為

一般如果是因為layout而引起的顯示不符期望效果的話，在ff下會表現正常，而在ie下會出現錯誤。這個時候可以嘗試觸發父容器及其中的子容器的haslayout屬性，通常可以通過加上zoom: 1;來除錯。直到找到了產生問題的元素，再進行鍼對性的修正。最好的辦法是對這個元素設定尺寸屬性。但是，有時不便指定尺寸屬性的情況下，就只能尋找替代方案了。對於ie7 ，最好的辦法是設定最小高度屬性為0；這個技術是無害的，因為0本來就是這個屬性的初始值。而且沒有必要對其他瀏覽器隱藏這個屬性。而對於ie6和更早版本中觸發一個元素hasLayout的方法是在overflow屬性是visible的情況下設定這個元素的高度屬性為1%，然後對其他瀏覽器隱藏這個設定。這種技術就是著名的Holly hack。

display

啟動haslayout的值:inline-block

取消hasLayout的值:其他值

width/height

啟動hasLayout的值：除了auto以外的值

取消hasLayout的值：auto

position

啟動hasLayout的值：absolute

取消hasLayout的值：static

float

啟動hasLayout的值：left或right

取消hasLayout的值：none

zoom

啟動hasLayout的值：有值

取消hasLayout的值：narmal或者空值

（zoom是微軟IE專有屬性，可以觸發hasLayout但不會影響頁面的顯示效果。zoom: 1常用來除錯， ie 5不支援。）

ie7還有一些額外的屬性可以觸發該屬性（不完全列表）：

min-height: (任何值)

max-height: (任何值除了none)

min-width: (任何值)

max-width: (任何值除了none)

overflow: (任何值除了visible)

overflow-x: (任何值除了visible)

overflow-y: (任何值除了visible)

21.多顯示一個字

產生條件：多個浮動元素中間夾雜HTML註釋語句，浮動元素寬度設定為100%；則在下一行多顯示一個上一行的最後一個字元；

處理方法：果斷刪掉註釋！

22.CSS優先順序！important

產生條件：IE6當中，在同一組CSS屬性中，!important不起作用；

處理方法：單獨設定。

23.img圖片下部高度多餘5px

產生條件：IE6瀏覽器；

處理方法：1、將圖片轉化為塊級物件，即display:block。還有四種其他方法:

1、將圖片轉換為塊級物件

即，設定img為“display:block;”。

2、設定圖片的垂直對齊方式

即設定圖片的vertical-align屬性為“top，text-top，bottom，text-bottom”也可以解決。

3、設定父物件的文字大小為0px

即，在程式碼中新增一行：“font-size:0;”可以解決問題。但這也引發了新的問題，在父物件中的文字都無法顯示。就算文字部分被子物件括起來，設定子物件文字大小依然可以顯示，但在CSS效驗的時候會提示文字過小的錯誤。

4、改變父物件的屬性

如果父物件的寬、高固定，圖片大小隨父物件而定，那麼可以設定“overflow:hidden;”來解決。

5、設定圖片的浮動屬性

即在本例中增加一行CSS程式碼： img {float:left;}”。如果要實現圖文混排，這種方法是很好的選擇。

IE6 瀏覽器常見相容問題 大彙總（23個）

IE6以及各個瀏覽器常見相容問題 大彙總