主题手术之几个CSS bug及解决方法

1.第一个bug相信不少用过css+div的人都知道——用CSS设置div的背景图片无法显示

这个在之前做Kayo 2011 1.0时就发现了这个ie bug,并发现了解决方法。产生bug的原因是因为ie默认没有定义height和width就认为它们为0px(这个大家用firebug查看一下就知道,无法显示背景的div的高度就一条线那么多),所以背景就无法显示了。网上基本的做法都是给div定义height和width,但是如果div本身的height和width是不固定的,那就无法用上面的方法了!不过我相信每个bug都注定有一个不用hack解决的方法,而这次的方法是给div加上overflow: hidden。一旦加上overflow: hidden,div的背景就会乖乖的出现了。

 

2.第二个bug十分麻烦,是li的一个bug,这个bug在ie和firefox中都存在,当li的子元素添加了float属性后,li会全乱了。

这个我在网上暂时还没有见到有人提出,所以解决方法只能靠自己了。在尝试了好多方法并且都以失败告终后我快要打算放弃了,这个时候我注意到li的border不是乱了,而是有规律的重叠在一起,我用firebug查看一下发现每个li的大小都只有一条线那么多,没错,相信大家都已经猜到了,这跟上面第一个bug的情况很相似,于是我抱着兴奋的心情,在li的css中加入了一句overflow: hidden,然后按一下F5,li十分整齐了。后来我再试了一下,在li的父元素中添加overflow: hidden也是可行的。

 

3.第三个bug是li中的span或div右浮动下沉问题

这是ie和chorme的bug,ff下无此bug,我在做edit_link时发现了这个bug,我猜想是li中的span会自动被判断为块元素,所以不能跟前面的元素同行而下沉,但给span消除块元素属性并不能解决问题,于是不断尝试其他方法,最后发现解决方法十分诡异——把右浮动的span放到前面。比如两个span,<li><span id="left"><span id="right" style="float: right"></li>,这时候id为right的span会打破li的边界下沉到li的右下方,这时候只需要把id为right的span放在id为left的左边即可,即现在写成<li><span id="right" style="float: right"><span id="left"></li>。再按F5,问题是不是已经解决了呢?

 

以上是我在修改评论模板的过程中所遇到的css bug,那几天大部分时间都花在修复bug上了,不是一般的辛苦,但正如我在之前一篇文章《UI设计是一个不断改进的过程》引用某大师说的:学css不难,学得好,就要不断自己尝试,才能真正学会用css。的确当发现css bug并自己解决时,那才有一种真会用css的感觉,一种值得回味的感觉。

本文由 Kayo Lee 发表,本文链接:http://kayosite.com/some-css-bug.html

评论列表

  • 评论者头像
    回复

    博主,您好。我现在遇到一个问题就是我的主页导航栏在搜狗兼容状态和ie7浏览器下面会出现错位现象,不知道改怎么解决,还请指导一下。非常感谢~

    • 评论者头像
      回复

      @所谓刚子 你好噢,刚刚我用IEtester的ie7模式看过,导航好像没有什么问题,你说的错位具体指的是怎样?

      • 评论者头像
        回复

        @Kayo 在搜狗浏览器下的兼容状态下 本来应该是横着排列,可是到了搜狗浏览器下 就是竖着排列了。。不知道为啥。求指导。。谢谢!

        • 评论者头像
          回复

          @所谓刚子 客气了!你可以给包含导航的ul添加width,并且添加overflow:hidden,这样导航就会横排了。具体的原理要了解好盒子模型,这样才能写出兼容性高的页面!

          • 评论者头像
            回复

            @Kayo 貌似还是不行哦。。。也不知道咋折腾了。。。chrome审查元素能看盒子模型吧 求大师指导。

            • 评论者头像
              回复

              @所谓刚子 大师可不敢当了,大家一起研究一下 :mrgreen:
              嗯,chrome审查元素能看盒子模型。你试试在css中添加
              .unit-list {width: 970px;overflow: hidden; }
              就是给ul定一个宽度,刚好容纳970px的内容,然后overflow:hidden是用来清除子元素的浮动对ul的影响,这样就应该可以完全横排了。

  • 评论者头像
    回复

    关于li 的bug,还有 span div 上下错乱的bug,你可以试试:
    vertical-align 属性。非IE7 用 middle, IE7 用top.
    IE6同IE7.

    或者用 dl>dt>dd 结构代替。
    同理,其实 vertical-align 属性还能解决 img标签下面5px的空隙的bug。

  • 评论者头像
    回复

    博主,你好
    请问你的分页导航是怎么做到的呢?这是什么效果呀?页面基本上没动啊

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail
:wink: :roll: :oops: :mrgreen: :idea: :cry: :?: :-| :-o :-P :-? :) :( 8-O