煎蛋在 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…… 等各种奇奇怪怪的浏览器。