CSS Hacks : 修複 IE 的 Padding 錯誤

由於眾所周知的原因，IE在處理 padding 樣式的時候總是讓我們不那麼順心，如（圖片來自蘇沈小雨的CSS2中文手冊）：

在 padding 數值很大的地方（比如標題列的背景 div 和標題之間），瀏覽器的差別就顯示的很明顯。
通過查詢，找到了一種Hack方法。比如 CSS 原來是這樣的：

.titleblock {}{
padding:2em; margin:0; text-align:left;
background-image:url('../image/titlebg.jpg'); height:140px;
background-repeat:no-repeat; background-position:right center;
}

其中的 height 屬性為140px，在FF中整個 div 的高度是 140 + 2* (2em) 約為 190px ，而在IE6和IE7中均為 140px ，這樣就導致有大概 50px 的差別。
只要這樣寫：

.titleblock {}{
padding:2em; margin:0; text-align:left;
background-image:url('../image/titlebg.jpg'); height:140px;
background-repeat:no-repeat; background-position:right center;
}

*html .titleblock {}{
height:190px;
}

也就是在下面添加一個 *html 塊(這個塊只有IE 6+ 支援，FF不支援)，在裡面把實際的數量寫進去就行了。

PS：來自 http://webdesign.about.com/od/css/a/aaboxmodelhack.htm 的方法是：div {}{
    width: 100px;
    padding: 10px;
    border: 10px solid #000;
}
* html div {}{
    \width: 140px; /**//* for IE5 and IE6 in quirks mode */
    w\idth: 100px; /**//* for IE6 in standards mode */
} 

不過根據實驗，並不能得到合適的數值。

參考來源：http://www.cnblogs.com/Randy0528/archive/2007/09/29/910760.html