CSS相容性解決方案(盒模型)- !important的IE7,Firefox問題

來源:互聯網
上載者:User
  前面的很多內容屬於引言部分,如果您對這些內容比較瞭解,可以直接跳到下面的“盒模型問題的解決”,查看主要的內容。

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

  在CSS標準中,一個盒模型包括4個區,分別是:內容、內邊距(padding)、邊框(border) 和外邊距(margin)。而Width寬度的計算,CSS有它的標準。但是實際上,不同的瀏覽器的表現卻不同。比如,
  Firefox(FF)是準確按照CSS標準:width為內容的寬度,也就是說:
    層的寬度 = "width" + "padding(left and right)" + "border-width";
  而IE則把width作為整個層的寬度:
    內容的寬度 = "width" - "padding" - "border-width"; 引用內容2007.10.03 update:IE7在一次更新中修正了盒模型的BUG,與Firefox的解析一致。2007.10.03驗證。

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

  針對這個問題,我們經常使用!important來區分Firefox和IE6.0: 程式碼#content
{
  width: 414px !important;
  width: 400px;
  padding: 5px; /*只給出一個值,表示上右下左的邊距都為5px*/
  border-width: 2px;
}

Firefox識別!important,而IE6不識別,且!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的同時定義”上,這個問題在CSS代碼中一定要注意。而明白了這一點,解決的方法就不難想到了——

當子項目的寬度固定時,padding在其父元素中指定

只要添加一個無width定義的wrapper層,把原來的一個content層拆分成2個層,分別地,在wrapper中定義padding和border-width,然後在content中定義width: 程式碼#wrapper { padding: 5px; border-width: 2px; }

#content { margin: 0px; width: 400px; }

程式碼<div id="wrapper">
  <div id="content">
    ...
  </div>
</div>

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

  這種解決方案可以說是最終的方案,使用CSS hack的方法只是目前過渡階段的臨時方法。
  對於網站構造,特別是對於樣式比較複雜的網站,個人建議在重要的層快外加上wrapper層。

  但是對於目前現成的模板,可以有選擇修改部分樣式,分別定義 "width" 與 "padding或者border-width" ,或者使用其他方法。

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

PS:小站上面的很多地方使用了wrapper層,從而CSS樣式表中沒有使用一個!important。
  本文屬於個人見解,歡迎大家指正和補充~

相關文章

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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