盒模型bug的解決方法_網站重構教程

本文來自：tantek.com

我們定義一個最基本的層：

div.boxtest{ 

border:20px   solid #60A179;

padding: 30px;

background :  #ffc;

width : 400px;

}

標準情況下，這個盒的寬度是:20 30 300 30 20=400px。

但是在IE5.0瀏覽器中，對盒模型的寬度解釋有個bug，它認為300 px是整個盒的總寬度，內容的寬度變成：300-20-30-20-30=200px。

為了彌補這個bug，采用一個技巧：即增加一個IE5不能解釋的聲音屬性"voice-family",讀到這個定義時瀏覽器就不再繼續閱讀，認為寬就是400px，但而其他符合標準的瀏覽器會繼續閱讀，并執行第二個真實值300px。

div.content{

border:20px solid #60A179;; 

padding:30px;

background: #ffc;

width :400px;

voice-family :   "\"}\"";

voice-family :inherit;

width :  300px;

}

同樣，在Opera7.0以前的瀏覽器也有這樣的解析bug。但我們并不需要使用偽值，有更簡單的辦法解決這個問題： html>body .content { width :300; }