首頁 > 開發者 > CSS

DIV+CSS相容IE6、IE7、Firefox方法探究

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

在區別Firefox和IE時最常用的是!important方法，對於其他不同瀏覽器和瀏覽器的不同版本的的相容性問題還有下面一些方法，比如:@import，注釋，屬性選擇符，子物件選擇符和voice-family等方法,這些方法在《CSS網站布局實錄》中有講述。

◆下面是IE和Firefox的CSS相容性問題

1.DOCTYPE影響CSS處理

2.Firefox:DIV設定margin-left,margin-right為auto時已經置中,IE不行

3.Firefox:body設定text-align時,DIV需要設定margin:auto(主要是margin-left,margin-right)方可置中

4.Firefox:設定padding後,DIV會增加height和width,但IE不會,故需要用!important多設一個height和width

5.Firefox:支援!important,IE則忽略,可用!important為Firefox特別設定樣式，值得注意的是，一定要將xxxx!important這句放置在另一句之上

6.DIV的垂直置中問題:vertical-align:middle;將行距增加到和整個DIV一樣高line-height:200px;然後插入文字，就垂直置中了。缺點是要控制內容不要換行

7.cursor:pointer可以同時在IEFirefox中顯示遊標手指狀，hand僅IE可以

8.Firefox:連結加邊框和背景色，需設定display:block,同時設定float:left保證不換行。參照menubar,給a和menubar設定高度是為了避免底邊顯示錯位,若不設height,可以在menubar中插入一個空格。

9.在mozillafirefox和IE中的BOX模型解釋不一致導致相差2px解決方案：DIV{margin:30px!important;margin:28px;}
注意這兩個margin的順序一定不能寫反，據阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：DIV{maring:30px;margin:28px}
重複定義的話按照最後一個來執行，所以不可以唯寫margin:XXpx!important;

10.IE5和IE6的BOX解釋不一致

IE5下DIV{width:300px;margin:010px010px;}
DIV的寬度會被解釋為300px-10px(右填充)-10px(左填充)最終DIV的寬度為280px，而在IE6和其他瀏覽器上寬度則是以300px+10px(右填充)+10px(左填充)=320px來計算的。這時我們可以做如下修改DIV{width:300px!important;width/**/:340px;margin:010px010px}
關於這個/**/是什麼我也不太明白，只知道IE5和firefox都支援但IE6不支援，如果有人理解的話，請告訴我一聲，謝了！：）

11.ul標籤在Mozilla中預設是有padding值的,而在IE中只有margin有值所以先定義ul{margin:0;padding:0;}就能解決大部分問題。

◆注意事項：

 

1、float的DIV一定要閉合。

例如：(其中floatA、floatB的屬性已經設定為

 
    
  
  1. float:left;)<#DIVid=\”floatA\”> 
    2. 
  
  2. <#DIVid=\”floatB\”> 
    3. 
  
  3. <#DIVid=\”NOTfloatC\”> 
    4.

這裡的NOTfloatC並不希望繼續平移，而是希望往下排。
這段代碼在IE中毫無問題，問題出在Firefox。原因是NOTfloatC並非float標籤，必須將float標籤閉合。
在

 
    
  
  1. <#DIVclass=\”floatB\”> 
    2. 
  
  2. <#DIVclass=\”NOTfloatC\”> 
    3. 
  
  3. 之間加上<#DIVclass=\”clear\”> 
    4.

這個DIV一定要注意聲明位置，一定要放在最恰當的地方，而且必須與兩個具有float屬性的DIV同級，之間不能存在嵌套關係，否則會產生異常。
並且將clear這種樣式定義為為如下即可

 
    
  
  1. ：.clear{  
    2. 
  
  2. clear:both;}  
    3.

此外，為了讓高度能自動適應，要在wrapper裡面加上overflow:hidden;
當包含float的box的時候，高度自動適應在IE下無效，這時候應該觸發IE的layout私人屬性(萬惡的IE啊！)用zoom:1;可以做到，這樣就達到了相容。
例如某一個wrapper如下定義

 
    
  
  1. ：.colwrapper{  
    2. 
  
  2. overflow:hidden;  
    3. 
  
  3. zoom:1;  
    4. 
  
  4. margin:5pxauto;}  
    5.

2、margin加倍的問題。

　設定為float的DIV在IE下設定的margin會加倍。這是一個IE6都存在的bug。
解決方案是在這個DIV裡面加上display:inline;
例如： 

 
    
  
  1. <#DIVid=\”imfloat\”> 
    2. 
  
  2.  
    3. 
  
  3. 相應的CSS為  
    4. 
  
  4. #IamFloat{  
    5. 
  
  5. float:left;  
    6. 
  
  6. margin:5px;/*IE下理解為10px*/  
    7. 
  
  7. display:inline;/*IE下再理解為5px*/}  
    8. 
  
  8.  
    9.

3、關於容器的包涵關係

很多時候，尤其是容器內有平行布局，例如兩、三個float的DIV時，寬度很容易出現問題。在IE中，外層的寬度會被內層更寬的DIV擠破。一定要用Photoshop或者Firework量取像素級的精度。

4、關於高度的問題

如果是動態地新增內容，高度最好不要定義。瀏覽器可以自動調整，然而如果是靜態內容，高度最好定好。（似乎有時候不會自動往下撐開，不知道具體怎麼回事）

5、最狠的手段-!important;

如果實在沒有辦法解決一些細節問題,可以用這個方法.Firefox對於”!important”會自動優先解析,然而IE則會忽略.如下

 
    
  
  1. .tabd1{  
    2. 
  
  2. background:url(/res/images/up/tab1.gif)no-repeat0px0px!important;/*StyleforFirefox*/  
    3. 
  
  3. background:url(/res/images/up/tab1.gif)no-repeat1px0px;/*StyleforIE*/}  
    4.

值得注意的是，一定要將xxxx!important這句放置在另一句之上，上面已經提過

IE7.0出來了，對CSS的支援又有新問題。瀏覽器多了，網頁相容性更差了，疲於奔命的還是我們，為解決IE7.0的相容問題，找來了下面這篇文章：

現在我大部分都是用!important來hack，對於IE6和firefox測試可以正常顯示，但是IE7對!important可以正確解釋，會導致頁面沒按要求顯示！搜尋了一下，找到一個針對IE7不錯的hack方式就是使用“*+html”，現在用IE7瀏覽一下，應該沒有問題了。

現在寫一個CSS可以這樣： 

 
    
  
  1. #example{color:#333;}/*Moz*/  
    2. 
  
  2. *html#example{color:#666;}/*IE6*/  
    3. 
  
  3. *+html#example{color:#999;}/*IE7*/ 
    4.

那麼在firefox下字型顏色顯示為#333，IE6下字型顏色顯示為#666，IE7下字型顏色顯示為#999，他們都互不干擾。我真希望那個垃圾的IE6快點退休。

◆DIV+CSS三行三列布局（相容各種瀏覽器） 

  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"  
  2.  
  3. "http://www.w3.org/TR/html4/strict.dtd"> 
  4. <HTML> 
  5. <HEAD> 
  6. <TITLE>DIV布局測試</TITLE> 
  7. <styletypestyletype="text/CSS"> 
  8.  
  9. DIV  
  10. {  
  11. height:150px;  
  12. }  
  13. DIV.left  
  14. {  
  15. width:20%;  
  16. float:left;  
  17. clear:right;  
  18. background-color:#eeeeee;  
  19. }  
  20.  
  21. DIV.center  
  22. {  
  23. width:50%;  
  24. float:left;  
  25. clear:right;  
  26. background-color:#CCCCCC;  
  27. }  
  28.  
  29. DIV.right  
  30. {  
  31. width:30%;  
  32. float:left;  
  33. clear:right;  
  34. background-color:#808080;  
  35. }  
  36. DIV.both  
  37. {  
  38. width:100%;  
  39. clear:both;  
  40. background-color:#696969;  
  41. }  
  42.  
  43. </style> 
  44. </HEAD> 
  45.  
  46. <BODY> 
  47. <DIVclassDIVclass="left">左側</DIV> 
  48. <DIVclassDIVclass="center">中側</DIV> 
  49. <DIVclassDIVclass="right">右側</DIV> 
  50.  
  51. <DIVclassDIVclass="both">全行</DIV> 
  52.  
  53. <DIVclassDIVclass="left">左側</DIV> 
  54. <DIVclassDIVclass="center">中側</DIV> 
  55. <DIVclassDIVclass="right">右側</DIV> 
  56. </BODY> 
  57. </HTML> 

轉自：http://developer.51cto.com/art/201008/220140.htm

用途：收集總結

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css div table generator beautiful div box css css center div horizontally firefox css plugin how to make div centered in css how to set css class on div in reactjs component browser compatibility css code for firefox
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More