DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> IE6,IE7及FF火狐浏覽器的區別和兼容方法
IE6,IE7及FF火狐浏覽器的區別和兼容方法
編輯:CSS詳解     

你對IE6,IE7及FF火狐浏覽器的區別和兼容方法是否熟悉,這裡和大家分享一下,相信本文介紹一定會讓你有所收獲。

IE6,IE7及FF火狐浏覽器的區別和兼容方法

1.IE7與IE6相比,有多達200多處改進,但它們都是在StrictMode下實現的,即在頁首聲明DocType為XHTMLTransitional,XHtmlStrict等.而在QuirksMode下,IE7和IE6別無二致。所以為了更好的兼容,盡量聲明DocType,采用StrictMode進行制作。

2.IE7支持Alpha通道的PNG圖片,但是這些Alpha通道圖片在IE6下還是不能正常顯示的,所以還是盡量使用透明GIF圖片。

3.IE7盒子模型改變了:盒子對於"overflow"使用了"visible"默認值,所以對於子元素尺寸大於父元素尺寸時,IE7會和Firefox一樣將子元素露出於父元素之外顯示,而不是像IE6那樣把父元素撐大了包含子元素.把頁面設置成"overflow:visible"即可。

4.設置為float的div在ie下設置的margin會加倍。這是一個IE6存在的bug。解決方案是在這個div裡面加上"display:inline"。

5.IE和火狐對'width'定義的不同:

Firefox中:容器占的寬度=內容寬度+padding寬度+border寬度;

IE中:內容寬度=您定義的容器寬度(InternetExplorer'width')-padding寬度-border寬度
(InternetExplorer'width'則是指整個容器的寬度,包括內容,padding,border)

6.CSS布局的居中問題:FF火狐裡設置margin-left,margin-right為auto時已經居中,IE則設置body{TEXT-ALIGN:center;}才行

7.FF火狐設置padding後,div會增加height和width,但IE不會,故需要用!important多設一個height和width

8.在mozillaFirefox和IE中的BOX模型解釋不一致導致相差2px解決方法:div{margin:30px!important;margin:28px;}

9.ul標簽在FF火狐中默認是有padding值的,而在IE中只有margin有值所以先定義ul{margin:0;padding:0;}

10.終結解決方法:

(1)!important:FF火狐和IE7對於"!important"會自動優先解析,IE6則忽略,可用!important為FF火狐和IE7單獨設置樣式,不影響IE6的顯示,值得注意的是,一定要將xxxx!important這句放置在另一句之上。

示例:div{margin:30px!important;margin:15px;}//在FF火狐和IE7中margin:30px,在IE6中margin:15px;

(2)由於FF火狐和IE7都支持"!important",而二者之間也存在差異,所以有時也會出現一些小問題,針對IE7可以使用使用"*+Html"。

示例

  1. :#example{color:#333;}/*FF火狐下字體顏色顯示為#333*/
  2. *Html#example{color:#666;}/*IE6下字體顏色顯示為#666*/
  3. *+Html#example{color:#999;}/*IE7下字體顏色顯示為#999*/

【編輯推薦】

  1. IE6不支持的五大CSS選擇符
  2. IE6.0對padding的解讀分析
  3. IE6 IE7 IE8三大浏覽器的CSS兼容速查表
  4. DIV+CSS開發XHtml網頁對SEO優化的影響
  5. DIV CSS網頁布局中對段落進行排版的方法
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved