2009-1-14 上午 - HTML/CSS/XML/XSL - -   

相信大家对于常见 CSS BUG 的处理已经相对比较熟悉，例如：IE6 Three Pixel Gap、IE5/6 Doubled Float-Margin Bug 等等。但时常我们也会碰到复杂的 CSS BUG 问题，所谓“复杂”实质是指触发的条件很复杂，而“BUG” 也并非指一定是浏览器的 BUG 。对于此类问题，我们首先要解决的是如何定位到问题，只有快速的定位到问题，才能更好的解决问题。

对于快速定位，个人的经验处理一般如下（基本可以定位到我在 淘宝 遇到的 90% 以上的复杂 CSS BUG 问题）：

1、检查页面的标签是否闭合

不要小看这条，也许折腾了你两天都没有解决的 CSS BUG 问题，却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的，而他们很容易犯此类问题。

快捷提示：可以用 Dreamweaver 打开文件检查，一般没有闭合的标签，会黄色背景高亮。

2、样式排除法

有些复杂的页面也许加载了 N 个外链 CSS 文件，那么逐个删除 CSS 文件，找到 BUG 触发的具体 CSS 文件，缩小锁定的范围。

对于刚才锁定的问题 CSS 样式文件，逐行删除具体的样式定义，定位到具体的触发样式定义，甚至是具体的触发样式属性。

3、模块确认法

有时候我们也可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块，寻找到触发问题的 HTML 模块。

4、检查是否清除浮动

其实有不少的 CSS BUG 问题是因为没有清除浮动造成的。养成良好的清除浮动的习惯是必要的，推荐使用 无额外 HTML 标签的清除浮动的方法（尽量避免使用 overflow:hidden;zoom:1 的类似方法来清除浮动，会有太多的限制性）。

5、检查 IE 下是否触发 haslayout

很多的 IE 下复杂 CSS BUG 都与 IE 特有的 haslayout 息息相关。熟悉和理解 haslayout 对于处理复杂的 CSS BUG 会事半功倍。推荐阅读 old9 翻译的 《On having layout》（如果无法翻越穿越伟大的 GFW，可阅读 蓝色上的转帖 ）

快捷提示：如果触发了 haslayout，IE 的调试工具 IE Developer Toolbar 中的属性中将会显示 haslayout 值为 -1。

6、边框背景调试法

故名思议就是给元素设置显眼的边框或者背景（一般黑色或红色），进行调试。此方法是最常用的调试 CSS BUG 的方法之一，对于复杂 BUG 依旧适用。经济实惠还环保^^

最后想给大家强调一点的是，养成良好的书写习惯，减少额外标签，尽量语义，符合标准，其实可以为我们减少很多额外的复杂 CSS BUG，更多的时候其实是我们自己给自己制造了麻烦。希望大家远离 BUG ，生活越来越美好。

这篇文章发表2009年1月14日 上午 11:40，并被分类于HTML/CSS/XML/XSL，已被 7537 人阅读。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论， 也可以发表您的评论，或者在您自己的网站中 引用（trackback） 该篇日志。



共有37 条评论

  1. 1. 头像 macji 2009年1月14日 上午 11:41 ₪

    嗯，沙发。。

  2. 2. 头像 冷韵 2009年1月14日 下午 12:41 ₪

    最后一点我最近才发现-_-!

  3. 3. 头像 稻草 2009年1月14日 下午 1:20 ₪

    常用的是颜色，就是不同的背景色测试，
    原型和opera的view>style>outline 类似

  4. 4. 头像 linxz 2009年1月14日 下午 1:27 ₪

    留名纪念！
    需要更多的巩固！

  5. 5. 头像 rage(正淳) 2009年1月14日 下午 1:42 ₪

    问我嘛，CSS DEBUG的人肉机器。

  6. 6. 头像 qingbo 2009年1月14日 下午 1:55 ₪

    尽量不要写HTML注释，以防影响IE布局……

  7. 7. 头像 怿飞 2009年1月14日 下午 1:58 ₪

    @qingbo 注释BUG属于常见BUG，还好的

  8. 8. 头像 Bentz 2009年1月14日 下午 6:38 ₪

    蛮好的经验。
    如果有很复杂的嵌套或者诡异的bug，新建一个简单的页面环境重现下，定位bug也挺方便

  9. 9. 头像 helly 2009年1月14日 下午 6:53 ₪

    一般看firebug的~

  10. 10. 头像 大猫 2009年1月14日 下午 7:28 ₪

    综上所述那就是排除法嘛哈
    ie6就是hasLayout引发的一大堆莫名问题
    还遇到过velocity某个调用的vm编码不统一造成个诡异的空行…
    firebug好东西…非常快速精准
    对于清浮动求教下,IE下目的就是激发hasLayout,为啥不用属于标准CSS的height:1%呢?会有啥副作用没?
    而其他浏览器的overflow:hidden又有什么副作用呢?
    谢谢

  11. 11. 头像 lingcarlos 2009年1月14日 下午 10:11 ₪

    @大猫
    使用overflow清除浮动时,当子元素绝对定位top,left设置负值时超出边界的会被裁剪掉,假如使用overflow清除浮动的元素中含有绝对定位弹出层或使用相对定位的元素超出的部分都会被一起hidden掉

  12. 12. 头像 iVane Hwang 2009年1月14日 下午 10:48 ₪

    @大猫，height:1%有可能会导致IE6下真的把高度变成了1%，特别是放在样式的最后，机率颇高，而且是有时会有时不会，所以一般用zoom:1;来触发~

  13. 13. 头像 welcome58 2009年1月15日 上午 8:30 ₪

    这些方法我基本上也都用过，正如怿飞所说，可以定位出绝大部分的BUG

  14. 14. 头像 释然 2009年1月15日 上午 8:52 ₪

    根据我多年种田的经验，相当的好用

  15. 15. 头像 都市竹马 2009年1月15日 上午 10:42 ₪

    我也是喜欢用firebug这样的工具。

  16. 16. 头像 jeffery 2009年1月15日 上午 11:10 ₪

    第6条真的是屡试不爽啊

  17. 17. 头像 cenji 2009年1月15日 下午 3:42 ₪

    恩，一直都是这几条的方法，确实是不会错的，而且相当有效，程序特别容易搞丢闭合标签，呵呵

  18. 18. 头像 yoom 2009年1月15日 下午 7:59 ₪

    在最近的一个项目中，我大量使用了overflow:auto;，也有一部分用了zoom:1;(主要针对IE6)来清除浮动。

    对于第四条：（尽量避免使用 overflow:hidden;zoom:1 的类似方法来清除浮动，会有太多的限制性）。

    不知道上面所说的“限制性”具体是指有哪些限制。

    我怕现在在做的这个项目中，大量使用了overflow:auto; zoom:1;而触发某些地雷。

  19. 19. 头像 怿飞 2009年1月15日 下午 8:02 ₪

    @yoom overflow:hidden的主要的原因11楼已经说了，而overflow:auto在某些特定情况下会触发滚动条，因为是auto，另外，overflow:auto还有这个问题：http://www.aoao.org.cn/blog/2007/05/firefox-overflow-auto/

  20. 20. 头像 yoom 2009年1月15日 下午 10:18 ₪

    明白了，谢谢博主！

    我自己的方法是：

    先用ff下的html validator插件看有没有嵌套错误。
    如果没有就用ff下的web developer->outline->outline block level elements 看看容器结构。
    最后结合Firebug的快速定位目标功能，加上web developer的CSS–>Edit css，就直接在FF下修改样式了，修改好后直接粘贴到外部css文件里。

    照顾好FF和IE7后，最后看IE6，IE6的问题都比较固定了，解决起来快很多。

    其实良好的结构就可以避免很多bug了。

  21. 21. 头像 Missx 2009年1月16日 下午 4:23 ₪

    我一般先看dtd…
    如果两个dtd不同，可能导致css的解释不一样…..

  22. 22. 头像 cssrain 2009年1月16日 下午 4:34 ₪

    首先应验证xhtml，这样可以避免问题。

    然后用firebug 就可以查看某处的css 是由几处影响着。 可以快速定位。

  23. 23. 头像 Robin 2009年1月16日 下午 5:25 ₪

    有点像修电脑时的排除法或者准系统法。
    我用aptana检查标签闭合，还不错。
    如果是已经嵌套过程序的页面一定要检查dtd，好多开发都认为那是没用的东西给删掉，也有可能放置的位置不对。

  24. 24. 头像 meteoric_cry 2009年1月17日 下午 1:37 ₪

    首先检测DTD类型　然后编码　@charset=utf-8;
    然后检查标签　用opera工具栏上的“查看”–》“样式”　然后选择一种框框就可以看的很清楚了

  25. 25. 头像 峰 2009年1月18日 下午 1:44 ₪

    总结的不错，基本上几种方法也都用过。

  26. 26. 头像 春天花会开 2009年1月20日 下午 11:09 ₪

    请问淘宝网首页等二级页的logo是用什么字体组成的淘宝网这三个字。在网上找了好久没有找到。麻烦你们说一下

  27. 27. 头像 大猫 2009年1月22日 下午 2:30 ₪

    @lingcarlos very thankful
    @iVane Hwang …最早在Holly Hack里面学到的1%…用到现在也没有在ie6下面异常,能麻烦提供个demo么?
    不用zoom主要是不能通过校验 && 1%高度没异常过

  28. 28. 头像 比特 2009年1月23日 上午 9:47 ₪

    说的好…

  29. 29. 头像 greengnn 2009年1月29日 上午 12:42 ₪

    嵌套错误用Firefox的HTML validtor插件更方便一些，检查haslayout加上个zoom:1;再试试效果。
    我个人是用firefox调试标准的css和html嵌套，再根据常见的iebug写hack，实在解决不了的检查haslayout和html注释，css继承关系(大多是IE下的，用ie development toolbar)看style。

  30. 30. 头像 怿飞 2009年2月2日 下午 6:04 ₪

    @greengnn 恩，方法其实基本类似，只是一般复杂BUG都基本出现于IE中。

  31. 31. 头像 rainoxu 2009年2月8日 上午 9:21 ₪

    我还是比较喜欢用背景大红色~~或者就是删掉某一个XHTML块或者CSS代码块来找找问题,然后再慢慢地缩小范围,这样时间上会比较快一点~排除法很多时候都比较管用~

  32. 32. 头像 扣子 2009年2月23日 下午 4:37 ₪

    还要少用回车（主要是嵌套时），空格用代码写，最近发现空格也会引起多猪bug，而且文件转换编码时，空格可能会变成“隐形乱码”，当然这种乱码在linux下可以看到

  33. 33. 头像 守鹤 2009年2月24日 下午 10:21 ₪

    最常用到的就是第6点。
    用背景来帮助查找问题~

  34. 34. 头像 hemin 2009年7月19日 下午 9:24 ₪

    沙发,留名

  35. 35. 头像 李大亮 2009年7月25日 上午 11:47 ₪

    其实真的有一天IE6 IE7 这些古董能消失 我们真的会很轻松！
    怿飞 其实还有很多 display 属性也挺恼人的，最近一直在用IE8的调试工具 跟踪定位 感觉还不错的 哈哈

  36. 36. 头像 李大亮 2009年7月25日 上午 11:51 ₪

    想问你个问题：看你这个 H1标签 如何快速定位页面中复杂 CSS BUG 问题 用的微软雅黑字体
    但是很多浏览器 默认设置是 是宋体 你认为 好用吗 ，我看你的 这个字体现在在IE6下 就是宋体
    希望交流 G-talk: 512show@gmail.com

  37. 37. 头像 dongyuwei 2010年1月6日 下午 3:42 ₪

    http://validator.w3.org/#validate_by_input markup和css校验先通过再检查会好很多，“标签是否闭合”也很快可以看出来（我们有个标签闭合不正确导致IE崩溃的痛苦经历，设置border后IE下显示box边框居然是犬牙交错状，根本不是矩形了。用validator校验才定位出问题）。

发表评论

(必填)

(必填，会为您保密)

评论仅支持“a、abbr、strong、em、blockquote、code”几个简单的标签