Css Div布局學習（四）關於hack

並不是每乙個瀏覽器都可以正確顯示設定的css，那有什麼辦法可以讓一些css使每乙個流行的瀏覽器都可以一致的顯示出網頁。哈哈，世界上真的有這麼好的事情，可以將一些不相容的情況統一，這一類都叫做css hack。我下面就簡單得介紹乙個css hack。

在任何標準相容的瀏覽器中，針對包含其它元素的元素，其總寬度的計算需要結合這些容器的寬度以及它們的padding和border來考慮。這也就是說300畫素寬的容器的實際總寬度為：300畫素加上padding和border。這就是計算元素的總寬度的方法。

但是，ie5和ie5.5並不是這麼計算的。它們將從width中減掉border和padding的寬度得到容器的真正寬度。也就是說，300像素寬的容器最終並沒有300畫素。如果padding設定為10畫素、border設定為10畫素，那麼容器的真正寬度只有 300-10-10-10-10，即260畫素。舉例說明如下：

#sideba r

對於這個框模型，其總寬度為border-left + padding-left + width + padding-right + border-right，其等於15+10+300+10+15，即總共350畫素。但是對於ie5和ie5.5來說，其總寬度為300畫素。幸運的是有一些天才解決了這個問題，我們來看看是怎麼樣解決這個問題的。

#sideba r/""

;voice-family:inherit;

width: 300px ;

} html>body #sideba r

這個就是框模型hack，首先ie5和ie5.5會對寬度進行相應的調整，接著使用voice-family，由於它不是乙個視覺化的css屬性，它將不會影響最終顯示。但是該規則加上了一些調整的語法，從而使得ie5和ie5.5錯誤的認為這個宣告將改寫這個選擇器的宣告。

後面的html>body #sidebar這條語句是為了一些css2相容的瀏覽器（比如opera瀏覽器）將不執行這些上面「迷惑」性的語句，所以要加上最後面的一句。

Css Div布局學習（四）關於hack

Css Div布局學習（四）關於hack

Css Div布局學習（一） Div布局基礎

Css Div布局學習（二）清理Clear

Css Div布局學習（四） 關於hack

Css Div布局學習（四） 關於hack

Css Div布局學習（一） Div布局基礎

Css Div布局學習（二） 清理Clear

相關推薦

Css Div布局學習（四）關於hack

Css Div布局學習（四）關於hack

Css Div布局學習（二）清理Clear