CSS盒子模型和IE瀏覽器

標籤：style   blog   http   color   io   os   使用   ar   strong   

CSS盒模型圖解

下面是一幅關於應用了CSS的元素是如何顯示它的尺寸的圖示。

 

 

 在本篇文章中，所有的瀏覽器在計算盒模型總寬度時處理margin屬性的方式都是一致的，所以我們將更多的精力放在padding和border屬性上。

W3C盒模型

首先看一下《 the W3C box model》，這裡所寫出的標準，如果沒問題的話，是應該被所有標準的現代瀏覽器及IE6和它的後續版本所遵循的。 在W3C盒模型中，一個區塊層級元素的總寬度按照如下方程式計算：

總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

對於高度也使用同樣的計算方法。

IE盒模型 

IE盒模型的計算方式：填充（padding）和邊框（border） 不被包括在計算的範圍內。

總寬度 = margin-left + width + margin-right

這就意味著元素一旦擁有橫向的填充和/或邊框，實際的內容地區（content area）就要擴大來創造出他們佔據的空間。

關於IE的版本

  IE5.5及更早的版本使用的是IE盒模型。IE6及更新的版本在標準相容模式下使用的是W3C標準盒模型。只要為文檔設定一個DOCTYPE，就會使得IE遵循標準相容模式的方式工作。此盒模型問題只會出現在IE5.5及其更早的版本中。

解決問題

現在確定了IE6及後續版本都會遵循標準相容模式， 唯一要關注的事情就是如何令IE5.5及更早版本中的網頁和其在現代的瀏覽器中的呈現效果是一致的。以下列出了4種方法。

1. 避免導致這個問題的情景
2. 插入額外的標記
3. 使用條件注釋判斷語句
4. 使用CSS Hacks 

1. 避免導致這個問題的情景

避免為一個元素同時設定width和padding值或者width和border值，再或者width同時和它們兩個值。者確保了所有的瀏覽器都會一樣的去計算元素的總寬度，而不用考慮它們使用哪種盒模型方式。 

 2. 插入額外的標記

拿一個例子來說明，下面的HTML用來定義一個新聞列表:

<div id="news">
    <h2>News</h2>
    <ul>
        <li>
            <h3>News article 1</h3>
            <p>Lorem ipsum dolor sit amet</p>
        </li>
        <li>
            <h3>News article 2</h3>
            <p>Lorem ipsum dolor sit amet</p>
        </li>
    </ul>
</div>

為了得到一個250像素寬的列表，且應用1像素的邊框和10像素的填充，會用到這樣的CSS：

#news {
    padding: 10px;
    border: 1px solid #000;
    width: 228px;
}

 在符合標準的瀏覽器中，總寬度為250px（1px border-left + 10px padding-left + 228px width + 10px padding-right + 1px border-right）。在IE5.5及更早的版本中，總寬度只是228px，因為它並未計算邊框和填充的值。

那麼如何避免這個問題呢？ 讓我假設新聞列表在另一個容器裡，比如它在側邊欄（sidebar）裡：

<div id="sidebar">
    <div id="news">
        ...
    </div>
</div>

 如果是這樣，可以為父容器（sidebar）設定寬度來達到效果：

#sidebar {width:250px}
#news {
  padding:10px;
  border:1px solid;
}

如果情況不允許，可是使用插入額外標記這個方法。還是上述的例子，在#news裡面插入一個標記：

<div id="news">
    <div>
        <h2>News</h2>
        <ul>
            ...
        </ul>
    </div>
</div>

使用如下CSS：

#news {width:250px}
#news div {
  padding:10px;
  border:1px solid;
}

3. 使用條件注釋判斷語句

如果沒有合適的父容器來控制寬度，也不能通過委任標記來解決問題，那針對IE5.*/Win我們需要設定一個不同的width值了。

最安全的方式就是使用條件注釋判斷語句，這些內容只能在IE/Win中被解析，下面的代碼只有在IE6以下的版本中被執行：

<!--[if lt IE 6]>
    <style type="text/css">
        #news {width: 250px;}
    </style> 
<![endif]--> 

如果採用這種方式，建議將全部的針對IE5.*/Win的代碼全部轉移到一個單獨的CSS檔案中來載入它：

<!--[if lt IE 6>
    <link rel="stylesheet" type="text/css" href="/css/ie5.css">
<![endif]-->

4.使用CSS Hacks

#news {
    padding: 10px;
    border: 1px solid;
    width: 250px;
    width:228px;
} 

 所有的瀏覽器都會看到並理解"width:250px"，但IE5.*/Win不會讀取下面的一行，width:228px，但這行會被其它瀏覽器解析。所以最後，IE5.*/Win得到width值是250px，其它瀏覽器得到的width值是228px。這樣保證在全部的瀏覽器中新聞列表的總寬度一致。

 

轉載自：http://www.osmn00.com/translation/213.html 

CSS盒子模型和IE瀏覽器