@ 2008.11.08 , 00:23
65

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


给这篇稿打赏,让译者更有动力
支付宝打赏 [x]
您的大名: 打赏金额:

0.0
赞一个 (0)

TOTAL COMMENTS: 65+1

[2] 1 »
  1. 贾友前
    @9 years ago
    228983

    Firefox是啥?煎蛋专用浏览器!

  2. 204015

    今晚也被这个问题折磨死了,采用的是老大的用BORDER替换的方法,

    Orz,发现用FF的话煎蛋就都圆角了,大爱圆角啊 =v=

    IE6显示都是边角 = =

  3. 192774

    路过进来喷一下IE6, IE7也不是好东西.
    Maxthon傲游和TT 腾讯浏览器不过是穿了马甲的ie, 本质上没有区别.

  4. scanol
    @9 years ago
    192226

    晕哦。不知道用傲游的人很多嘛~~~~~~~~~~~~!!!!!
    晕晕!我说怎么回事呢。

  5. 猫野冷夏
    @9 years ago
    192173

    仍然在用IE6的飘……Chrom有时用。IE7非常难用……总是死机……

  6. Mikiss
    @9 years ago
    192159

    Firefox.

  7. VIVIAN
    @9 years ago
    192154

    我是Safari 0.9%的贡献者。。。

  8. 192082

    ~~~电脑小白飘过~~~

  9. 192063

    ie的著名bug啊……
    ie就是网页设计师的噩梦

  10. 192041

    对于ie6作为网页设计师的我也时恨得咬牙切齿,每次设计确认后的切割把我折腾的,ie6,ie7,firefox,chrom全部测试,一个也不能少,基本上ie7,firefox,chrom都能保持一致,而ie6很多时候不得不专为它写css……
    什么时候才进入ie7+的时代呢?!

  11. 192038

    opera mini ! 手机上看惨不忍睹的!

  12. 192006

    Opera is still good,so i used
    IE 7 is to slow to me~

  13. 191988

    @ggarlic: MT的选项里面有浏览器标识可选的。

  14. 191987

    由于IE7在我去的部分论坛会出现提交失败的情况,没办法下只能继续IE6 了。
    感谢煎蛋们的努力。

  15. cuthead
    @9 years ago
    191937

    @oioi: 现在chrome用户比opera多是不争的事实。其实我觉得chrome挺好,为推广苹果机做贡献。

[2] 1 »

发表评论


24H最赞