官方模板Simpleblue和Book在IE中错位的解决办法

最近有一些朋友使用了Blogbus新推出的SimpleBlue和Book模板后出现了一些问题(主要是在IE中),主要是侧边栏被挤到了页面的下边而不是出现在应该出现的右侧。我回复了几封邮件说明了这个问题,但考虑到这个Bug的普遍性,我还是在这儿把暂时的解决方案写出来。

需要强调的是,不是每一个Blog都会出现这个问题,而且一般只是在IE里才会出现这个问题。

原因

左侧内容是放在ID为”content“的div标签中的,右侧(即侧边栏)是放在ID为”sidebar“的div标签中的。两个div又是放在ID为”container“的div中的。若忽略header和footer部分,则上述结构如下所示

_______________________
|container            |
| _________ _________ |
| |content| |sidebar| |
| |       | |       | |
| |       | |       | |
| |_______| |_______| |
|_____________________|

content和sidebar两部分均通过float: left这样的CSS定义实现并排放置,其总体宽度和应该小于container的宽度(770px左右),虽然content和sidebar都指定了宽度(content为550px左右,sidebar为220px左右),但当其中的内容过大,比如有一幅宽度为600px的图片作为Blog的内容出现在content中时,content(在 IE中)就会被相应的”撑大“,并因此使content和sidebar的总体宽度超过container的设定宽度,从而使sidebar被挤到下边去(这是float的无法避免的副作用)。

目前的解决办法

在CSS中找到定义content和sidebar的部分,如:

#content { ... }
#sidebar { ... }

在两个定义中都加上:

overflow: hidden;

这样,当content和sidebar中的内容超过他们的宽度时,超过的部分就会隐藏,从而不会导致整体总局的损坏,但同时,可能会使那些过大内容一部分无法显示。

这几天忙着过节串亲戚,再加上准备出国的东西,没什么时间更新blog,不过我尽快联系bus的工作人员,让他们在官方模板里也加上这个fix。(或者也许哪个bus的工作人员看到这个日志,就转告一下,修改一下那两个模板)


12 条评论

  1. 2006-06-07 09:13:17
    谢谢你的帮助,我页面问题已经解决。
  2. 2006-06-04 09:26:22
    你好,我用你的模板出现了下列问题,麻烦跟我诊断一下:

    ①首页点击Tag“健身”时出现sidebar部分在content的下面;而点击Tag“摄影”没有该问题;

    ②同样首页点击分页“[1]”也有上面的问题。

    万分感谢!
     回复 pingshang 说:
    我看了一下,不论是在Firefox中还是在IE6下,都没发现你说的问题啊?
    (2006-06-04 22:32:50)
  3. 2006-04-18 09:29:58
    我在用firefox打开我的simpleblue模板blog时,发现左边的正文出现了不能自动换行,而穿过右侧栏的情况。另外,我观察到此现象的显示器为800x600分辨率。

    我将把堆图放在我的blog中,你看看。谢谢。

    http://utime.blogbus.com
  4. 2006-04-09 18:39:42
    非常感谢你提供的模板,我非常喜欢,所以打算继续把这个Blog记下去。同时也感谢你给出了我的链接,我的blog除了给自己看,主要是想提供一些给他人的学习资源。


     回复 utime 说:
    不用谢,客气了! 就是图个乐儿
    (2006-05-08 04:52:51)
  5. 2006-02-20 21:21:52
    dcc82@126.com,谢谢
  6. 2006-02-20 21:20:37
    谢谢您,我很喜欢。如果方便,可以发一份到我这个信箱吗?谢谢!
  7. 2006-02-17 21:42:52
    您的blog真好看,请问一下这个curious sheep主题什么时候能发布呀?谢谢!
     回复 david 说:
    Curious Sheep这个主题是我用T43后设计的,而IBM的本本屏幕不怎么样,我后来发现这个主题在其它显示器上偏暗,不是很好,但又一直没时间修理它,所以暂时没有发布的打算。如果你觉得好,我可以Email给你
    (2006-02-19 22:42:44)
  8. 2006-02-17 19:44:49
    大师。。汗一个不是我要发多个的是我发了一直发不错去就多按了几下。。现在就是这个编码的问题了。。我如果全部用你发布的模板里面的内容会有乱码吗
     回复 查皮 说:
    看来Bus的后来程序还不太稳定啊,我那天回复评论时也总出问题。用我发布的模板应该没问题,因为所有的东西将会是你亲自粘贴到自定义模板里的。(别叫我“大师”,俺不是)
    (2006-02-19 22:45:50)
  9. 2006-02-17 11:42:46
    感谢大师的讲解!正在为这个问题烦恼呢

    还有一个问题

    为什么我用了您的模板

    在博客上面查看源文件的话出现的都是乱码??

    和编码有关吗?我原来也是utf8啊是正常的
     回复 查皮 说:
    查先生,你没必要把同样的问题重复提好几遍吧?(我把重复的多删了啊?^^)
    你说的这个以前有人提过,我也不清楚,因为Bus官方的模板不是我亲手改的。等我搞清楚了怎么回事我才能告诉你
    (2006-02-17 16:45:57)
  10. 2006-02-17 07:01:50
    还有个问题就是页面顶部显示 的tag原来后面有个more

    怎么现在出来一下就消失了呢?请指点
     回复 查皮 说:
    官方的模板也会消失么?我的之所以消失,是因为我不喜欢而且我也没有更多的Tag了。我去你的博看了一眼,你应该限制一下首页显示的Tag数,不然会破坏页面布局。
    (2006-02-17 11:46:02)
  11. 2006-02-07 17:16:52
    设计师辛苦鸟~~

    我也用了这个模板,总体来说粉满意,但是想改下评论处的字体,我感觉发表评论人滴字体好歪,而且好粗,评论处的感觉跟网页整体的素净恬淡感觉不是粉一致耶,能否告知一下解决办法,very 3Q啦~

    我滴地址:http://cornflower.blogbus.com/index.html
     回复 cornflower 说:
    在CSS部分找到#comments cite {font-size: 1.4em;},改成#comments cite {font-size: 1.4em; font-style: normal;}
    (2006-02-07 22:21:35)
  12. 2006-02-05 23:42:31
    你好我使用了这个模板,已经按照你的观点改了上述问题,但是还有另外一个问题。

    就是tag的数量过多,一行里放不下,请问如何才能减少显示tag的数量。我的博客http://nku.blogbus.com

    谢谢
     回复 nkfeng 说:
    在“Blog设置->首页显示的Tag数”处设置
    (2006-02-05 23:59:21)

添加评论