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 发表，本文链接：https://kayosite.com/some-css-bug.html
评论列表
博主，您好。我现在遇到一个问题就是我的主页导航栏在搜狗兼容状态和ie7浏览器下面会出现错位现象，不知道改怎么解决，还请指导一下。非常感谢～
@所谓刚子 你好噢，刚刚我用IEtester的ie7模式看过，导航好像没有什么问题，你说的错位具体指的是怎样？
@Kayo 在搜狗浏览器下的兼容状态下 本来应该是横着排列，可是到了搜狗浏览器下 就是竖着排列了。。不知道为啥。求指导。。谢谢！
@所谓刚子 客气了！你可以给包含导航的ul添加width，并且添加overflow:hidden，这样导航就会横排了。具体的原理要了解好盒子模型，这样才能写出兼容性高的页面！
@Kayo 貌似还是不行哦。。。也不知道咋折腾了。。。chrome审查元素能看盒子模型吧 求大师指导。
@所谓刚子 大师可不敢当了，大家一起研究一下
嗯，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。
@EvolutionJay span div 上下错乱 bug 还真是没有遇到过，谢谢提点了！
img 5px 的确可以用 vertical-align 解决，我之前也有写过文章关于这个 bug https://kayosite.com/ie6-img-bottom-blank-bug.html
博主，你好
请问你的分页导航是怎么做到的呢？这是什么效果呀？页面基本上没动啊