2008/11/08：

65

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

sein , 12:23 am / 3,062 pv / 分享到微博

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

但是在看到 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 。
煎蛋在 IE6 下的 CSS 问题修复了

感谢 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…… 等各种奇奇怪怪的浏览器。 ₪

[ 上 ] [ 下 ]已有65条评论

  1. lansild @ 2008-11-08 00:27:56 #1

    还好不用IE6

    oo (0) / xx (0)
  2. ku @ 2008-11-08 00:46:54 #2

    非常完美，sein辛苦了！
    ps： 看到你在槽边的留言，很难过，安慰一下。

    oo (0) / xx (0)
  3. 胡戈戈 @ 2008-11-08 00:53:19 #3

    IE6浮动双倍外边距的bug其实也就只要对浮动的元素加上display:inline就搞定，也不用去加个判断IE6的东东

    oo (0) / xx (0)
  4. 耗子小三 @ 2008-11-08 00:56:34 #4

    厄……跟IE讲兼容就是纵容MS搞乱网页标准…………

    oo (0) / xx (0)
  5. linfavourite @ 2008-11-08 01:28:42 #5

    还是Firefox好！

    oo (0) / xx (0)
  6. 摇滚客 @ 2008-11-08 01:39:14 #6

    牛人辛苦了
    我还以为是我机器的BUG = =

    oo (0) / xx (0)
  7. 阿猫 @ 2008-11-08 01:49:26 #7

    额，其实……我早就习惯没有首字了~~
    正文里的每行首字都能通过上下文推出来
    回复里熟悉的id我都记得后面几个字，至于我自己，“阿猫”两字哪怕只显示“苗”我都能认出来

    oo (0) / xx (0)
  8. Zx.MYS @ 2008-11-08 02:00:50 #8

    ie2/3/4……寒……
    不知道浏览起煎蛋来是什么样子的……

    oo (0) / xx (0)
  9. SteamedFish @ 2008-11-08 02:03:56 #9

    你列的浏览器除了老版本的 IE 外我都用过。
    只有 RssReader 没用过，怀疑这不是浏览器，是用 rss 工具的人留下来的吧

    PS: 我用的是自己编译的 Gran Paradiso, 不知道会被你们统计成 Gran Paradiso 还是统计成 Firefox…

    oo (0) / xx (0)
  10. ku @ 2008-11-08 02:04:33 #10

    @阿猫: 你真逗，害我这个时候大笑。

    oo (0) / xx (0)
  11. Shawn @ 2008-11-08 02:14:34 #11

    @胡戈戈: 可惜，不是浮动对象的问题，是非浮动对象的问题，囧。

    oo (0) / xx (0)
  12. bearpool @ 2008-11-08 07:09:24 #12

    我是3.7%…

    oo (0) / xx (0)
  13. Elton Disney @ 2008-11-08 08:26:46 #13

    不关心，我用的是Chrome

    oo (0) / xx (0)
  14. 呵呵 @ 2008-11-08 08:42:51 #14

    原来我是ie7

    oo (0) / xx (0)
  15. housne @ 2008-11-08 08:47:09 #15

    fuck IE and MS

    oo (0) / xx (0)
  16. 鬼火 @ 2008-11-08 08:47:28 #16

    每次调试网页时都是颤抖着打开ie

    oo (0) / xx (0)
  17. Aiger @ 2008-11-08 08:49:43 #17

    虽然是用的人家的电脑，还是忍不住回复下
    貌似那一串浏览器里面没有腾讯的山寨玩意？

    oo (0) / xx (0)
  18. sein @ 2008-11-08 08:56:33 #18

    @ku: :P

    @Zx.MYS: 其实还有 ie 8/9/10

    @SteamedFish: 厉害，我很想用用你的 Gran Paradiso

    @Aiger: 其实没写全的，还有其它奇奇怪怪的浏览器

    oo (0) / xx (0)
  19. leehow @ 2008-11-08 09:00:30 #19

    我知道他很恨他很恨…

    oo (0) / xx (0)
  20. Terranger @ 2008-11-08 09:16:15 #20

    自打开始做网站以来，就觉得ie一直是最难伺候的。

    oo (0) / xx (0)
  21. 狐狸狗 @ 2008-11-08 09:37:07 #21

    从没见过煎蛋首页的人飘过。。即使看了这篇，也没去点首页。。。我决定让煎蛋的首页不在我的人生中出现。。嘎嘎。。

    oo (0) / xx (0)
  22. 鼠标流 @ 2008-11-08 09:54:24 #22

    我都不知道怎么联系你们
    我也因为这个问题困扰好久了

    oo (0) / xx (0)
  23. nonu @ 2008-11-08 09:56:29 #23

    @鼠标流: 只要回复大家就能看到了

    oo (0) / xx (0)
  24. Denver @ 2008-11-08 09:57:37 #24

    好消息是那些没问题了，坏消息是用opera mini在手机上看留言出现同样问题。

    oo (0) / xx (0)
  25. nonu @ 2008-11-08 09:59:48 #25

    @Denver: 你说的那个我也遇见过。。。 看来下一步是要折腾 opera 了。。

    oo (0) / xx (0)
  26. Christian @ 2008-11-08 10:44:20 #26

    不用ie6.0Windows Media Player也是浏览器吗？

    oo (0) / xx (0)
  27. nonu @ 2008-11-08 10:48:20 #27

    @Christian: 它的确可以浏览网页

    oo (0) / xx (0)
  28. vampire @ 2008-11-08 10:59:31 #28

    不喜欢用条件注释，下划线就行了

    oo (0) / xx (0)
  29. 相宜本草 @ 2008-11-08 11:03:44 #29

    呵呵。正常了

    oo (0) / xx (0)
  30. sloia @ 2008-11-08 11:29:32 #30

    Google Chrome用不了就用ie7，基本上不出现两者都看不了的情况。

    oo (0) / xx (0)
  31. comeon_8 @ 2008-11-08 11:31:40 #31

    之前也有类似部题,一直没敢回馈,以为是机子问题呢~~
    不过昨晚发功夫下了个IE7,
    哈哈,还不错~~

    oo (0) / xx (0)
  32. 流星 @ 2008-11-08 12:07:52 #32

    哎，复制了你的那句代码，还是没搞定，我的2个侧边栏还是在ie6下下沉了，不懂html、css，确实头大

    oo (0) / xx (0)
  33. nonu @ 2008-11-08 12:16:51 #33

    @流星: —。—

    不同css 定义有不同的原因，不是简单复制上就能解决的……

    oo (0) / xx (0)
  34. oioi @ 2008-11-08 12:25:48 #34

    顶 shawn 大师！ 另外，煎蛋Opera 用户居然没有 Chrome 的多，让我很失望。

    oo (0) / xx (0)
  35. Y @ 2008-11-08 12:41:20 #35

    我是OP用户

    oo (0) / xx (0)
  36. cheney @ 2008-11-08 13:12:59 #36

    现在对付兼容问题都是用这种给某个浏览器单独hack的方式，谁高兴再去摸索所有浏览器都兼容的写法？太恶心自己了。

    oo (0) / xx (0)
  37. Sisphus @ 2008-11-08 13:21:42 #37

    原来用ie，不过现在用firefox，感觉的确比ie好点

    oo (0) / xx (0)
  38. rhett @ 2008-11-08 14:17:18 #38

    赞一下niu人shawn……..

    oo (0) / xx (0)
  39. 肥皂泡 @ 2008-11-08 14:18:47 #39

    haha, 我开始也以为是我机子的问题呢。

    oo (0) / xx (0)
  40. alun.wk @ 2008-11-08 14:36:52 #40

    强大的IE6…

    oo (0) / xx (0)
  41. cohead @ 2008-11-08 14:56:03 #41

    同oioi。。。

    oo (0) / xx (0)
  42. 安， @ 2008-11-08 15:00:04 #42

    #
    17 Aiger 说 :
    2008-11-08 8:49 am

    虽然是用的人家的电脑，还是忍不住回复下
    貌似那一串浏览器里面没有腾讯的山寨玩意？
    ——–

    我以前就一直用的是腾讯那山寨玩意。。没办法，用习惯了。
    不过现在还是转战firefox了，嗯。

    oo (0) / xx (0)
  43. ggarlic @ 2008-11-08 15:00:38 #43

    sein小心linux的粉丝喷你，你把他们心爱的Konqueror，Epiphany，Dillo说成是奇奇怪怪的浏览器，lol

    oo (0) / xx (0)
  44. niuyoo @ 2008-11-08 15:25:53 #44

    其实我 每次在 网吧 都是用IE 然后 回家 再用火狐在把首字快速 看一下
    = =!

    oo (0) / xx (0)
  45. Scratch @ 2008-11-08 15:37:46 #45

    顶Chrome Opera 等 小用户 浏览器

    oo (0) / xx (0)
  46. bisu @ 2008-11-08 19:37:04 #46

    一直认为目前的ie6已经拖了很多网页设计的后腿了
    PS：ie7的TW飘过
    PS又PS：第一次跳出鲜果来煎蛋

    oo (0) / xx (0)
  47. 周公解梦 @ 2008-11-08 20:58:32 #47

    个人还是比较喜欢FF，IE漏洞比较多 ～～

    oo (0) / xx (0)
  48. sidney @ 2008-11-08 22:32:41 #48

    为啥没有maxthon啊。。。。难道这个规到IE6里面？？？

    oo (0) / xx (0)
  49. C.C. @ 2008-11-08 23:07:27 #49

    一直RSS…

    oo (0) / xx (0)
  50. ggarlic @ 2008-11-08 23:49:18 #50

    @sidney
    马桶就一个图形化的shell而已，不算数吧，ie6的电脑装马桶就被识别为ie6

    oo (0) / xx (0)
  51. cuthead @ 2008-11-08 23:57:10 #51

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

    oo (0) / xx (0)
  52. ACG @ 2008-11-09 09:04:51 #52

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

    oo (0) / xx (0)
  53. ACG @ 2008-11-09 09:05:40 #53

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

    oo (0) / xx (0)
  54. atoon @ 2008-11-09 11:11:07 #54

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

    oo (0) / xx (0)
  55. maoz @ 2008-11-09 13:32:23 #55

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

    oo (0) / xx (0)
  56. jac @ 2008-11-09 13:38:40 #56

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

    oo (0) / xx (0)
  57. Betty @ 2008-11-09 15:36:38 #57

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

    oo (0) / xx (0)
  58. 脸 @ 2008-11-09 17:45:48 #58

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

    oo (0) / xx (0)
  59. VIVIAN @ 2008-11-09 22:03:52 #59

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

    oo (0) / xx (0)
  60. Mikiss @ 2008-11-09 22:37:00 #60

    Firefox.

    oo (0) / xx (0)
  61. 猫野冷夏 @ 2008-11-09 23:22:24 #61

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

    oo (0) / xx (0)
  62. scanol @ 2008-11-10 08:51:36 #62

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

    oo (0) / xx (0)
  63. Klesh @ 2008-11-11 10:28:28 #63

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

    oo (0) / xx (0)
  64. iHead @ 2008-12-09 19:32:59 #64

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

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

    IE6显示都是边角 = =

    oo (0) / xx (0)
  65. 贾友前 @ 2009-02-02 22:56:26 #65

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

    oo (0) / xx (0)

填写称呼和邮箱即可发布评论[ 上 ] [ 优 ] [ IMG ]