煎蛋在 IE6 下的 CSS 问题修复了

如题。经常有同学反映首页标题第一个字显示不全，我们用各种浏览器测试了都没看到症状；加上报错的几位同学是世界之窗/遨游用户，让我们以为这个问题只是少数人才会出现的问题。

但是在看到 ACG 同学的截图以后我震撼了，这没法看啊简直。但是反复检查无数遍 CSS，看不出问题。只好无限期拖着，直到遇见牛人 shawn。

在帮忙搞定一些 wordpress 的疑难杂症以后，我顺便提及了煎蛋的 CSS 症状，shawn 同学当即指出可能是 IE6 不兼容。随后迅速判断出首页标题显示不全的根源：

因为煎蛋首页为了排版所有图片都用了右对齐的 float 定义，而 IE6 对 float 里的内外边(margin/padding)值的会判断成双倍。也就是说我们对齐得刚刚好的图片，在 IE6 下就挤出去了。

知道原因以后我就把首页图片 CSS 的 margin/padding 全搞成 0，然后用白边(border)代替与文字的间距。这个 BT 的解决办法得到 shawn 的赞美，骄傲 ing~

本以后事情就完了的。结果今晚我自己下载了 IEtester 以后，发现在 IE6 下某些情况还会出现标题错位。shawn 又一针见血指出我们引用(blockquote)的定义跟首页右对齐的图片冲突，当图片压到引用部分以后，下一篇的标题就会错位。

然后我又想用 border 来搞定，或者干脆只给 blockquote 一个定义就是把文字变成灰色 …… 但是 shawn 同学竟然只给我一句代码就解决问题，就是在模板的 header 里主样式代码后面加一句给 IE6 看的补丁：
<!--[if IE 6]><style type="text/css" media="screen">blockquote{display:inline}</style><![endif]-->

我当场就抓狂了，这样就行？更新代码，删除服务器缓存，然后这个世界果真就完美了。。。

于是我激动的赞美了 shawn 大师。shawn 说：我最恨 IE 。
[-]

感谢 shawn，感谢各位报错的同学。如果不是你们，煎蛋残缺的页面还会每天给无数 IE6 用户参观，这是多么可怕的事情啊。

# 可能大家没有意识到这个问题的严重性。当我们以为所有人都在用 ie7 或者 firefox 的时候，服务器统计显示(最近一周)的 ie6 用户比例高达 47.1%！而 ie7 只有26.3%，firefox 是16.5%，Google Chrome 是3.7%，Opera 3.3%，Safari 0.9%，Mozilla 0.4%，Nokia Browser 0.4%，其它是非常小众的浏览器比如 ie2/3/4、Sony/Ericsson Browser、LibWWW、Konqueror、Windows Media Player、Acrobat Webcapture、Firebird、Camino、AWeb、Epiphany、Dillo、RssReader…… 等各种奇奇怪怪的浏览器。