該死的IE6瀏覽器兼容問題及部分解決方案（網上整理）

做爲一個初涉前端技術的IT菜鳥，IE瀏覽器的兼容問題是一個不得不跨越的坎。爲了可以在不一樣瀏覽器達到一樣的顯示效果，就不得不花心思想出辦法實現兼容。因爲各大主流瀏覽器內核不一樣，各自的實現標準有所差別，所以一樣的CSS樣式表可能沒法同時適應其它的瀏覽器，特別是IE6更是讓人感受崩潰。所以就須要用到CSS HACK技術。（針對不一樣瀏覽器寫不一樣的CSS代碼）

兼容IE6的第一步就是單獨對IE進行兼容，你針對IE6所寫的代碼隻影響IE6；有幾種方法能夠區

分開IE6：IE特有條件註釋、CSS選擇器、JavaScript，咱們將逐一討論。

1、使用IE特有條件註釋

微軟給IE添加了條件註釋以區分不一樣版本，任何東西均可以塞進條件註釋裏：標籤、JavaScript、js文件、css、內聯樣式。可使用條件註釋來針對某一個IE瀏覽器版原本編寫代碼。
規則以下：（譯註：可參考IE 特有註釋(hack)）
 <!--[if ie]>
 這段文字會在全部IE瀏覽器顯示
<![endif]-->

<!--[if lte IE 6]>
這段文字僅顯示在 IE6及IE6如下版本。
This message will only appear in versions of Internet Explorer less than or equal to version 6.
<![endif]-->

<!--[if gte IE 6]>
這段文字僅顯示在 IE6及IE6以上版本。
This message will only appear in versions of Internet Explorer greater than or equal to version 6.
<![endif]-->

<!--[if gt IE 6]>
這段文字僅顯示在 IE6以上版本（不包含IE6）。
This message will only appear in versions of Internet Explorer greater than version 6.
<![endif]-->

<!--[if IE 5.5]>
這段文字僅顯示在 IE5.5。
This message will only appear in Internet Explorer 5.5.
<![endif]-->

<!--在 IE6及IE6如下版本中加載css-->
<!--[if lte IE 6]>
[*]
<![endif]-->

使用條件註釋加載css的好處是這些樣式是獨立於其餘css文件的，所以不會在編寫兼容代碼時弄

得一團糟；並且當IE6的市場份額下降到不須要兼容時，能夠快速的清理掉。
使用條件註釋的惟一缺點是在IE瀏覽器下會增長額外的HTTP請求數，因此須要權衡是否這樣作

。但我不建議使用條件註釋加載外部js文件，由於js文件會形成阻滯，在js未加載完以前其他文

件都不會被加載；對於js請使用JavaScript程序來區分瀏覽器而非條件註釋。

2、使用CSS選擇器區分開IE6

若是你不打算使用條件註釋，CSS選擇器是另一個區分開IE6的辦法，IE6不支持子選擇器；

先針對IE6使用常規申明CSS選擇器，而後再用子選擇器針對IE7+及其餘瀏覽器。
示例：
 
<style type="text/css">
.content {color:red;}
div>p.content {color:blue;}
</style>
<div>
 <p class="header">Some Header Text Here</p>
</div>
 
 這個方法的缺點是容易把樣式表弄得一團糟，因此必定要寫好註釋說明。
在示例中，針對IE6寫的樣式在其餘瀏覽器中也會執行，但(標準瀏覽器中)以後的子選擇器覆蓋

了以前的申明，而IE6不支持子選擇器因此忽略了它。

3、使用JavaScript區分開IE6

若是你想要使用JavaScript區分開IE6，請看示例：
 
//原生JavaScript
if(typeof document.body.style.maxHeight === "undefined") {
    alert('IE6 Detected');
}
//MooTools（框架）
if (Browser.Engine.trident4) {
    alert('IE6 Detected');
}
//jQuery（框架）
if (($.browser.msie) && ($.browser.version == "6.0")){
    alert('IE6 Detected');
}
解決IE6兼容性問題常見方法

一、使用聲明

你必須常常在html網頁頭部放置一個聲明，推薦使用嚴格的標準。例如

<!DOCTYPEHTMLPUBLIC「-//W3C//DTDHTML4.01//EN」 
 
"http://www.w3.org/TR/html4/strict.dtd」>
or,forXHTML: 
<!DOCTYPEhtmlPUBLIC「-//W3C//DTDXHTML1.0Strict//EN」 
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd」>
最後你須要是IE6進入兼容模式，這已經足夠兼容了。

二、使用position:relative

設置一個標籤position:relative能夠解決不少問題，特別是曾經有過看不見的經歷或者奇怪佈局的

框架。明顯的，你須要當心，絕對位置放置的子元素是否都參照找到新位置。

三、爲浮動元素使用display:inline

IE6兼容性解決方案爲浮動元素使用display:inline。浮動元素會有一個著名的IE6雙邊距

marginbug。假如你設置了左邊距5px但實際上獲得了10px左邊距。display:inline能夠解決這個

問題，儘管它不是必需的，可是css仍然有效。

四、設置元素啓動hasLayout

大部分IE6（IE7）的渲染問題均可以經過起來元素的hasLayout屬性來兼容。這是IE內置的設定

，肯定一個內容塊相對其它內容塊是有界限和位置的。當你須要設置一個行內元素例如一個鏈接

變成塊狀元素或者是透明效果，設置hasLayout也是必須的。

五、修復重複字符的bug

IE6兼容性解決方案修復重複字符的bug。複雜的佈局會觸發一個bug：浮動對象的最後字符會出

如今已經清除浮動的元素後面。這裏有幾種解決的辦法，部分是理想的，而且一些測試和出錯是

必須的。
a、確保浮動元素都使用：display:inline；
b、最後一個浮動元素使用margin-right:-3px;
c、在浮動對象最後一個元素後使用一個條件註釋。例如<!—>這裏輸入註釋…<![endif]
d、在容器內的最後使用一個div空標籤（它也必須設置90%寬度甚至更小）

六、使用a標籤完成可點擊和hover原理

IE6只支持a標籤的css定義hover效果
你可使用它去控制javascript啓動的widgets，使得他們仍然保持鍵盤操做。這裏有個二擇一的

問題，可是a標籤是全部解決方案中最可靠的。

區別不一樣瀏覽器的CSS hack寫法：

區別IE6與FF：
background:orange;*background:blue;
區別IE6與IE7：
background:green !important;background:blue;
區別IE7與FF：
background:orange; *background:green;
區別FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;

注：IE都能識別*;標準瀏覽器(如FF)不能識別*；

IE6能識別*，但不能識別 !important,
IE7能識別*，也能識別!important;
FF不能識別*，但能識別!important;

                     IE6     IE7      FF
  _(下劃線)     √         ×         ×
  *（星號）    √         √         ×
!important      ×         √         √

IE6支持下劃線，IE7和firefox均不支持下劃線。

因而你們還能夠這樣來區分IE6，IE7，firefox
 background:orange;*background:green;_background:blue;

注：無論是什麼方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最後面。

1.css在不一樣瀏覽器下顯示效果不一樣

firefox和IE對某些css樣式的認定有很多區別，包括：

-1 ul和ol的默認padding值是不同的，在Firefox中，padding-left默認值爲40px左右，而IE中爲0，通常設置ul{margin:0;padding:0;}就能解決大部分問題

-2對字體大小small的定義不一樣，Firefox中爲13px，而IE中爲16px，差異挺大，也只能設置爲14px了事；(暫時沒有發現)

-3 並列排列的多個元素（圖片或者連接）的代碼中的空格和回車會形成元素之間的間隙，而在firefox中和在IE中顯示是不同的，IE顯示空格（約8px）、firefox顯示空格（約4px）

-4對不規範代碼的兼容狀況不一樣，IE中漏掉的關閉符號對顯示不形成影響，而firefox中就會造成錯亂的佈局，而在ie中用到的padding和 margin的負值都會被firefox解析爲0，易形成佈局的混亂；（我以爲好像負值在firefox中也是有顯示的）

-5firefox對於長高尺寸的嚴格解析會形成與設置不匹配（超出）的圖片或表格將原設置div撐大；
* ！important屬性能夠在除IE瀏覽器的其餘瀏覽器中起做用，所以有人利用這種差異來令一個CSS兼容多種瀏覽器；

-6 未定義id的div，在IE中會與div屬性中的其餘設置有關，而在firefox中的位置會於div在文件中位置有關，緊隨前一個div出現……（有待嘗試）

-7 設置爲float的div在ie下設置的margin會加倍的，特別是margin-left，這是ie6的一個bug。解決的方法是在這個div裏面加上display:inline;

-8若是是動態地添加內容，高度最好不要定義。瀏覽器能夠自動伸縮，然而若是是靜態的內容，高度最好定好。（彷佛有時候不會自動往下撐開，不知道具體怎麼回事）

-9 FF: div 設置 margin-left, margin-right 爲 auto 時已經居中, IE 不行。IE裏設置text-align:center，就居中了，但在FF中不行。因此通常兩個都要設置。

-10 FF: 設置 padding 後, div 會增長 height 和 width, 但 IE 不會, 故須要用 !important 多設一個 height 和 width（也沒感受，以爲設了padding，你們的高寬都變了）

-11在FF中能夠實現的div 垂直居中問題: vertical-align:middle; 將行距增長到和整個DIV同樣高 line-height:200px; 而後插入文字，就垂直居中了。缺點是要控制內容不要換行。這種方法在IE中實現不了。（已試過！有用）

-12FF: 連接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。

-13 在浮動（float）的div後加clear屬性，這能夠解決背景的自適應高度問題。怎麼加才能讓不一樣瀏覽器都好使？IE中有默認行高，這是要解決的問題。

-14FF中不支持文字的自動轉行；什麼word-wrap:break-word;word-break:break-all都是IE搞的鬼，根本就不符合css標準。（如今看到的解決辦法都是經過編程實現）

2.css解決不一樣瀏覽器的兼容問題的方法 （不是咱們須要的方法，咱們要達到的要求是儘可能不寫!important也能解決）

解決這種問題能夠經過規範css代碼，使其符合兩種規範的標準樣式，也能夠在差異處利用！important對firefox設置屬性，或者針對多種瀏覽器分別各自配置合適的CSS文件，再經過判斷瀏覽器選擇不一樣CSS實現兼容性。

代碼以下：
<!--[if IE]>
#example { color: #333; } /* FF*/
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
<![endif]-->

這樣在IE6中顯示字體顏色是#666；在IE7中顯示的字體顏色是#999；在FF中顯示的顏色是#333

3.FF解決背景的自適應高度問題

①對於背景不能自動延伸的緣由上面說的很清楚，解決方法是多嵌套一個層,這個層設置浮動，並承擔背景，就ok了。
下面就簡單示意一下

本行代碼就是讓背景顏色自動延續

能夠這麼理解：float使得層自動得到寬和高

可是有了第三種方法，這種方法好像並不值得推薦。

②另外一種方法就是給第一個div賦予屬性值：display:table；但這種方法會形成另一些佈局上的錯誤。能夠考慮使用，但不建議使用。

③我想這是最重要的一種方法，可是中間問題不少。方法就是clear:both。

.clear{clear:both}可使高度向下延續，可是會自動產生行高；

.clear{clear:both;height:0}在FF中清除了行高，可是IE裏不認；

.clear{clear:both;height:1%}在FF和IE中仍然不認；

像以前寫的.clear{clear:both;height:1%;font-size:0px;overflow:hidden}在IE中好使，但在FF中卻不能讓背景顏色延續，除非加上邊框。！

IE裏面有默認的行高，必須把行高給清掉，能夠用font-size:0px或line-height:0px；可是這裏又有一個問題，就是height的值不要用百分數，沒有用！

補充：

1.DOCTYPE 影響 CSS 處理
2.FF: div 設置 margin-left, margin-right 爲 auto 時已經居中, IE 不行
3.FF: body 設置 text-align 時, div 須要設置 margin: auto(主要是 margin-left,margin-right) 方可居中
4.FF: 設置 padding 後, div 會增長 height 和 width, 但 IE 不會, 故須要用 !important 多設一個 height 和 width
5.FF: 支持 !important, IE 則忽略, 可用 !important 爲 FF 特別設置樣式
6.div 的垂直居中問題: vertical-align:middle; 將行距增長到和整個DIV同樣高 line-height:200px; 而後插入文字，就垂直居中了。缺點是要控制內容不要換行
7.cursor: pointer 能夠同時在 IE FF 中顯示遊標手指狀， hand 僅 IE 能夠
8.FF: 連接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設置高度是爲了不底邊顯示錯位, 若不設 height, 能夠在 menubar 中插入一個空格。
9.在mozilla firefox和IE中的BOX模型解釋不一致致使相差2px解決方法： div{margin:30px!important;margin:28px;}注意這兩個margin的順序必定不能寫反，據阿捷的說法! important這個屬性IE不能識別，但別的瀏覽器能夠識別。因此在IE下其實解釋成這樣： div{maring:30px;margin:28px}重複定義的話按照最後一個來執行，因此不能夠只寫margin:XXpx! important;
10.ul標籤在Mozilla中默認是有padding值的,而在IE中只有margin有值因此先定義 ul{margin:0;padding:0;}就能解決大部分問題


注意事項：
一、float的div必定要閉合。 例如：(其中floatA、floatB的屬性已經設置爲float:left;) <#div id=」floatA」 ></#div> <#div id=」floatB」 ></#div> <#div id=」NOTfloatC」 ></#div>這裏的NOTfloatC並不但願繼續平移，而是但願往下排。這段代碼在IE中毫無問題，問題出在FF。緣由是NOTfloatC並不是float標籤，必須將float標籤閉合。在 <#div class=」floatB」></#div> <#div class=」NOTfloatC」></#div>之間加上 <#div class=」clear」></#div>這個div必定要注意聲明位置，必定要放在最恰當的地方，並且必須與兩個具備float屬性的div同級，之間不能存在嵌套關係，不然會產生異常。而且將clear這種樣式定義爲爲以下便可： .clear{ clear:both;}此外，爲了讓高度能自動適應，要在wrapper裏面加上overflow:hidden; 當包含float的box的時候，高度自動適應在IE下無效，這時候應該觸發IE的layout私有屬性(萬惡的IE啊！)用zoom:1;能夠作到，這樣就達到了兼容。例如某一個wrapper以下定義： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}


二、margin加倍的問題 設置爲float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。解決方案是在這個div裏面加上display:inline; 例如： <#div id=」imfloat」></#div> 相應的css爲 #IamFloat{ float:left; margin:5px;/*IE下理解爲10px*/ display:inline;/*IE下再理解爲5px*/}


三、關於容器的包涵關係 不少時候，尤爲是容器內有平行佈局，例如兩、三個float的div時，寬度很容易出現問題。在IE中，外層的寬度會被內層更寬的div擠破。必定要用Photoshop或者Firework量取像素級的精度。


四、關於高度的問題 若是是動態地添加內容，高度最好不要定義。瀏覽器能夠自動伸縮，然而若是是靜態的內容，高度最好定好。（彷佛有時候不會自動往下撐開，不知道具體怎麼回事）


五、最狠的手段 - !important; 若是實在沒有辦法解決一些細節問題,能夠用這個方法.FF對於」!important」會自動優先解析,然而IE則會忽略.以下 .tabd1{ background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/ background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}值得注意的是，必定要將xxxx !important 這句放置在另外一句之上，上面已經提過 IE7.0出來了，對CSS的支持又有新問題。瀏覽器多了，網頁兼容性更差了，疲於奔命的仍是咱們 ，爲解決IE7.0的兼容問題，找來了下面這篇文章： 如今我大部分都是用!important來hack，對於ie6和firefox測試能夠正常顯示，可是ie7對!important能夠正確解釋，會致使頁面沒按要求顯示！搜索了一下，找到一個針對IE7不錯的hack方式就是使用「*+html」，如今用IE7瀏覽一下，應該沒有問題了。 如今寫一個CSS能夠這樣： #example { color: #333; } /* Moz */ * html #example { color: #666; } /* IE6 */ *+html #example { color: #999; } /* IE7 */ 那麼在firefox下字體顏色顯示爲#333，IE6下字體顏色顯示爲#666，IE7下字體顏色顯示爲#999
解決IE中設了高度的LI間距問題
vertical-align:bottom;
上邊的方法通常都會解決問題，可是許多時候許多未知的緣由，還會致使間距問題的出現。試試如下方法：
1.定義行高 line-height
2.設置隱藏 overflow:hidden
3.li增長浮動屬性 float

解決IE下hr顯示有邊距的問題
.hr1{ height:1px;border:none;border-top:1px solid Black;margin:0;*margin:0 0 -14px 0;float:none;*float:left;display:block;}
<hr class="hr1" />太牛了:
document.getElementById("return_no").getElementsByTagName("li");

附剛作的一個簡單CSS+DIV佈局網頁，在其它瀏覽器上面運行都沒有問題，就IE六、IE7出現頁面錯亂，讓人情何以堪啊。http://pan.baidu.com/share/manage