评论：如何快速定位页面中复杂 CSS BUG 问题

来自：dongyuwei

dongyuwei — Wed, 06 Jan 2010 07:42:40 +0000

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

来自：李大亮

李大亮 — Sat, 25 Jul 2009 03:51:53 +0000

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

来自：李大亮

李大亮 — Sat, 25 Jul 2009 03:47:17 +0000

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

来自：hemin

hemin — Sun, 19 Jul 2009 13:24:59 +0000

沙发,留名

来自：守鹤

守鹤 — Tue, 24 Feb 2009 14:21:17 +0000

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

来自：扣子

扣子 — Mon, 23 Feb 2009 08:37:26 +0000

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

来自：rainoxu

rainoxu — Sun, 08 Feb 2009 01:21:19 +0000

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

来自：怿飞

怿飞 — Mon, 02 Feb 2009 10:04:35 +0000

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

来自：greengnn

greengnn — Wed, 28 Jan 2009 16:42:19 +0000

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

来自：比特

比特 — Fri, 23 Jan 2009 01:47:02 +0000

说的好…

来自：大猫

大猫 — Thu, 22 Jan 2009 06:30:57 +0000

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

来自：春天花会开

春天花会开 — Tue, 20 Jan 2009 15:09:41 +0000

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

来自：峰

Sun, 18 Jan 2009 05:44:04 +0000

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

来自：meteoric_cry

meteoric_cry — Sat, 17 Jan 2009 05:37:38 +0000

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

来自：Robin

Robin — Fri, 16 Jan 2009 09:25:17 +0000

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

来自：cssrain

cssrain — Fri, 16 Jan 2009 08:34:04 +0000

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

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

来自：Missx

Missx — Fri, 16 Jan 2009 08:23:35 +0000

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

来自：yoom

yoom — Thu, 15 Jan 2009 14:18:56 +0000

明白了，谢谢博主！

我自己的方法是：

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

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

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

来自：怿飞

怿飞 — Thu, 15 Jan 2009 12:02:57 +0000

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

来自：yoom

yoom — Thu, 15 Jan 2009 11:59:17 +0000

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

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

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

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