【教學】IE 中有關 letter-spacing 的 bug

使用 CSS 寫範本時
明明在 Chrome 和 Firefox 都沒問題
但一旦用 IE 就會有一大堆 bug 湧現
今天我們來探討一個完全不明白 IE 開發團隊為甚麼可以無視的重大漏洞 (菸)

letter-spacing 是控制字與字之間的空隙屬性

示範圖 "letter-spacing:1em;"


這可以應用在 CSS 中讓你控制網誌的字體
來看以下範例

.post-body {
padding:0px 0px 10px 0px;
font-family: Arial,MS Gothic, Sans-serif;
font-size:13px;
letter-spacing: -.1em;
line-height:1.6em;
}

當 letter-spacing 是負數時，正常的瀏覽器會出現縮排的效果

如下圖左邊是"letter-spacing:0em;"，右邊是"letter-spacing:-.1em;"


明顯看到右邊的字比較緊密
但是呢假如使用 IE 來看就會像下圖這樣

中間空格的一行都縮掉了


這是因為 IE 裡使用 "-.1em;" 連空格行的 <br /> 都縮掉了...
這時候我們要在 <header> 中 CSS 的 Post-body 屬性下附加粉紅粗體的那三行

.post-body {
padding:0px 0px 10px 0px;
font-family: Arial,MS Gothic, Meiryo,Helvetica, Sans-serif;
font-size:13px;
letter-spacing: -.1em;
line-height:1.6em;
}

.post-body br {
letter-spacing:0px;
}

這樣做目的是為了讓 <br /><br /> 兩行不會被無視掉縮為一行
萬惡的 IE 浪費了我大半天啊!!!!