相信大家对于常见 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、??槿啡戏?/p>

有时候我们也可以从页面的 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 ,生活越来越美好。

?

共有39 条评论

  1. 1. 头像 macji

    嗯,沙发。。

  2. 2. 头像 冷韵

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

  3. 3. 头像 稻草

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

  4. 4. 头像 linxz

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

  5. 5. 头像 rage(正淳)

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

  6. 6. 头像 qingbo

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

  7. 7. 头像 快乐十分精确公式

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

  8. 8. 头像 Bentz

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

  9. 9. 头像 helly

    一般看firebug的~

  10. 10. 头像 大猫

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

  11. 11. 头像 lingcarlos

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

  12. 12. 头像 iVane Hwang

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

  13. 13. 头像 welcome58

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

  14. 14. 头像 释然

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

  15. 15. 头像 都市竹马

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

  16. 16. 头像 jeffery

    第6条真的是屡试不爽啊

  17. 17. 头像 cenji

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

  18. 18. 头像 yoom

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

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

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

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

  19. 19. 头像 快乐十分精确公式

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

  20. 20. 头像 yoom

    明白了,谢谢博主!

    我自己的方法是:

    先用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

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

  22. 22. 头像 cssrain

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

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

  23. 23. 头像 Robin

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

  24. 24. 头像 meteoric_cry

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

  25. 25. 头像

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

  26. 26. 头像 春天花会开

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

  27. 27. 头像 大猫

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

  28. 28. 头像 比特

    说的好…

  29. 29. 头像 greengnn

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

  30. 30. 头像 快乐十分精确公式

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

  31. 31. 头像 rainoxu

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

  32. 32. 头像 扣子

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

  33. 33. 头像 守鹤

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

  34. 34. 头像 hemin

    沙发,留名

  35. 35. 头像 李大亮

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

  36. 36. 头像 李大亮

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

  37. 37. 头像 dongyuwei

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

  38. 38. 头像 路在脚下

    太帅啦!相当好用!

  39. 39. 【转】快速定位复杂 CSS BUG 问题 « WEB前端开发工程师博客-GaFish

    […] 看了怿飞的如何快速定位页面中复杂 CSS BUG 问题一文,总结的非常好,转载主要内容如下,以备不时查阅。 […]

发表评论

(必填)

(必填,会为您保密)

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

? ?
  • 凰家街采:你期待的长江时代 ——凤凰网房产武汉 2018-07-26
  • 反思顾雏军案,营造可预期的法治环境 2018-07-26
  • 广图:神“摄”手初养成计划:摄影师爸爸成长篇 2018-07-26
  • 女性之声——全国妇联 2018-07-25
  • 习近平与人民日报那些事 2018-07-25
  • 新IP--河北频道--人民网 2018-07-25
  • 新时代领导干部应急管理能力提升的实践与思考 2018-07-25
  • 证监会答复投资者信息检索库 2018-07-24
  • 款款粽子情,深深敬老人 2018-07-24
  • 李鹏国的行为是对善良的一种打击,暴露了资本主义的道貌岸然的虚伪本质,女白领的同情心是值得赞扬的,只有不够,没有毛病 2018-07-24
  • 邓紫棋首任明星制作人 吴亦凡身兼二职 2018-07-23
  • 地铁上索座不成 蛮横老汉掌掴大妈 2018-07-23
  • 发现食品安全问题拨打12331投诉 2018-07-23
  • 莆田市:建立“网上大调解中心”经验做法 2018-07-22
  • 火锅店推120元月卡11天被吃垮:8点就排队,一卡全家用 2018-07-22
  • 579| 726| 767| 189| 579| 608| 450| 883| 937| 552|