DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS中使用!important解決IE6 IE7 Firefox兼容性問題
CSS中使用!important解決IE6 IE7 Firefox兼容性問題
編輯:CSS詳解     

你對CSS中使用!important解決IE6 IE7 Firefox兼容性問題的方法是否了解,這裡和大家分享一下,首先我們看一下盒模型的概念。

CSS中使用!important解決IE6 IE7 Firefox兼容性問題

◆首先談談!important問題的引起(盒模型問題):

在CSS標准中,一個盒模型包括4個區,分別是:內容、內邊距(padding)、邊框(border)和外邊距(margin)。而Width寬度的計算,CSS有它的標准。但是實際上,不同的浏覽器的表現卻不同。比如,
Firefox(FF)是准確按照CSS標准:width為內容的寬度,也就是說:
層的寬度=width+padding(leftandright)+border-width;

而IE則把width作為整個層的寬度:
內容的寬度=width-padding-border-width;

IE的這種解析,被認為是一個BUG。但事實上,這種解釋也不無道理,人們在設計頁面的時候關注得更多的是盒子的大小,而不是內容的大小。正是因為浏覽器的不同解析,給CSS的設計帶來一些困難。

◆針對這個問題,我們經常使用!important來區分Firefox和IE6.0:

以下為引用的內容:

  1. #content
  2. {
  3. width:414px!important;
  4. width:400px;
  5. padding:5px;/*只給出一個值,表示上右下左的邊距都為5px*/
  6. border-width:2px;
  7. }

Firefox識別!important,而IE不識別,且!important的width優先級高,因此FF理解為width:400px,IE6.0理解為width:414px,從而顯示就相同了。

但是問題出在IE7,IE7.0對!important有了識別能力,但是對盒模型的解析卻和IE6.0等一樣,從而造成很大的麻煩。也就是說,!important的方法在IE7.0下變得不適用了。
而一般的情況下,border的使用相對較少的,並且border-width一般較小,因此最主要的問題就出在padding上了。網上很多人總結的經驗是:padding要盡量少用,能用margin的,就別用padding。這種說法是消極的,問題的解決不應該總是回避。

盒模型問題的解決:

仔細想想,其實問題就出在“width與padding/border-width的同時定義”上。而明白了這一點,解決的方法就不難想到了,只要添加一個無width定義的wrapper層,把原來的一個content層拆分成2個層,在wrapper中定義padding和border-width,然後在content中定義width:

以下為引用的內容:

  1. #wrapper{padding:5px;border-width:2px;}
  2. #content{margin:0px;width:400px;}

以下為引用的內容:

  1. <dividdivid="wrapper">
  2. <dividdivid="content">
  3. ...
  4. </div>
  5. </div>

這樣問題就可以得到解決,FF,IE6.0以及IE7.0都會獲得相同的顯示效果。更重要的是,沒有使用任何CSShack。

這種解決方法可以說是最終的方案,使用CSShack的方法只是目前過渡階段的臨時方法。
對於網站構造,特別是對於樣式比較復雜的網站,個人建議在重要的層快外加上wrapper層。但是對於目前現成的模板,可以有選擇修改部分樣式,或者使用其他方法。

是否適合所有的浏覽器?

理論上,這種方法應該適用於各種浏覽器。
但是本人認為除非大型網站,兼容FF,IE6.0,IE7.0已經足夠,這裡也是主要針對這三個最主流的浏覽器,IE更低版本,以及其他浏覽器上的可行性有待驗證。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved