WordPress边栏下沉解决办法

建立这个博客已经有好一段时间了,但一直是在IE8平台测试博客,没想到博客在低版本IE会出现边栏下沉的情况。唯有求助于互联网。虽说网上也有不少人遭遇这种情况,也分享了很多的解决方法,但是许多办法要么是我看不明白要么是无法解决我的问题。不过却学会了一些东西:

CSS浮动的问题

浮动因脆弱而饱受诟病。大多数的脆弱性来自于 IE6 及其一系列的浮动相关 bug。因为越来越多的设计师不再支持 IE6 了,你也可以不关注它了。不过对于那些要关注的人来说,这里有些大概。

(一)推倒是浮动元素内的元素(大多是图片)比浮动元素本身宽造成的现象。大多数的浏览器会在浮动之外渲染图片,但是不会有伸出来的部分影响其他布局。IE 会扩展浮动来包含图片,精彩大幅度地影响布局。一个普遍的例子是突破伸出主内容之外把侧栏推到下面。 快速修正:确保不是图片造成这种情况,使用 overflow:hidden 来切除多余的部分。

(二)双倍边距bug处理 IE6 时,另一个需要记住的事情是,如果在和浮动方向相同的方向上设置外边距(margin),会引发双倍边距。快速修正:给浮动设置 display:inline; 而且不用担心,它依然是块级元素。

(三)3像素间距是指挨着浮动元素的文本会神奇的被踢出去3像素,好像浮动元素的周围有一个奇怪的力场一样。快速修正:在受影响的文本上设置宽度或高度。

(四)IE7 中,底边距 bug是当浮动父元素有浮动子元素时,这些子元素的底边距会被父元素忽略掉。快速修正:用父元素的底内补白(padding)代替。(via CSS浮动–float详解

以上内容我只是大致了解到了WordPress边栏下沉是CSS和IE搞得鬼。或者准确的说是IE7、IE6捣乱。我是不能通过修改IE6和IE7来满足我的博客主题的了,也只能够修改博客主题的CSS。但是怎么修改?“CSS浮动–float详解”提到的解决方法,不适合我遭遇的情况,网上众多的方法让我觉得无所适从。于是我就求助于异次元软件世界的老大x-force。

他的回答是这样的:(1)IE6的兼容性很奇怪的,你看看css里是不是容器的宽度不够,或者改一下float的方向咯。(2)没事,我被ie6欺负惯了。经常莫名其妙的事情都有,我的主题很多时间都是花在ie6上。

恰好他也没太多的时间去解答再多的,我就只能根据他的提示去修改CSS文件。经过多次的努力,比如修改容器宽度的大小啊,float的方向啊等等。最后终于通过修改sidebar的CSS margin-right 属性修正了sidebar在基于IE6内核架构的浏览器中下沉的问题。

margin-right 属性设置元素的右外边距。可能的值有:

描述
auto 浏览器设置的右外边距。
length 定义固定的右外边距。默认值是 0。
% 定义基于父对象总高度的百分比右外边距。
inherit 规定应该从父元素继承右外边距。

我就想会不会是因为margin-right本身的固定值不够大或者小,于是我就将margin-right的值改为auto。修改后用ie6打开博客,边栏就正常了。后来我又让几个朋友帮忙测试,在FF,chrome,Safari和遨游等浏览器测试都没有发现问题。注:软矿使用的WordPress主题是Compositio 1。

标签

发表评论

评论已关闭。

评论列表(4)

  • soping

    2010.5.29 00:05

    我用的主题在ie6下侧边栏就跑到最下面去了,但是不去管它,为了ie折腾?我蛋疼~~

    • Mr·K

      2010.5.29 00:05

      To soping:尝试去修改,或者你也很快就修复这个问题

  • ilMilk

    2010.5.21 14:05

    话说在天朝,至少还60%的人在用IE6~这就苦了我们这些页面重构者了~杯具

    • Mr·K

      2010.5.21 14:05

      To ilMilk: 我就为这个WordPress侧边栏折腾了不少,还好现在已经解决了。