WL

越来越好,越好越来

XHTML CSS调试的一些思路

授之以鱼不如授之以渔,在这里就不论述一些CSS Hack和编写的具体错误,我把解决CSS问题的一些思路分享给大家,把自己几年来学习CSS的一些经验分享出来。

调试工具

Firefox

  1. Firebug
  2. Web Developer
  3. Dom Inspector

Download Here: Firefox Add-ons

IE

  1. IE Develop Bar
  2. DebugBar
  3. IETester 不同IE版本调式

调试思路

主要从客观和主观两方面解决调试问题。

客观

在CSS调试过程中,经验会因为一些客观的因素导致莫名奇妙的问题,就好比做实验时的外界因素的影响。有过一段经历,调试一个页面时一直都不正确,花了很长时间用单元测试的方法终于发现了问题,原来是把label写成了lable(这不尽让我想起了《德国专家的故事》读者上看的,貌似是这名)。所以我们在做研究的时候将客观的外界因素全部去掉,开发起来才能得心应手。针对CSS的编写主要从以下几个方面入手:

  1. 样式是否被调用使用IE Develop Bar, Web Developer中的Disable Cache;找到相应元素,查看是否调用样式
  2. 清除浏览器默认样式编写CSS之前先清除掉浏览器默认样式,可以让我们在调试过程中忽略不同浏览器的渲染不同。这里Yahoo YUIyui.cssA list A partreset.css都挺好用。在实际运用中,我认为用*{padding:0px;margin:0px} a img{border:none}就足以应付了,至于list-style可以在单独设置,没必要一开始都去掉。
  3. DOCTYPE确认页面是否声明DOCTYPE,DOCTYPE的不同会影响浏览器的渲染方式。
  4. CSS语法检查检查样式名有无拼写错误、是否忘记结尾 } 等。标点符号,;。可以用CleanCSS检查 CSS的拼写错误。
  5. XHTML标签检查使用Dreamweaver中用Ctrl+[选择父级标签,Ctrl+Shift合并标签,逐级检查是否封闭,用Dreamweaver的Validate就可以啦。
  6. 优先级id, class, style优先级大家都不会出错,当多个CLASS重叠时样式表中的排序会产生很大的影响。(如class="a b c"时a b c在样式表中的排序就会有影响)。
  7. 检查字符留意空格或者编码的问题,firebug 很容易就查出他们的问题,查一下头部是否有多余字符或者文档中是否有text节点。

主观

主管因素主要是技术上的问题,编写XHTML CSS经验多了之后,不知不觉就很少会出现预料之外的事了。到后期能够基本上不使用HACK以保证每个浏览器都兼容,如双margin问题,思路较清晰在一开始就用padding完全防止他的发生。

  1. 预判是技术问题还是是bug?
  2. 渲染引擎知其然,不知其所以然。了解各浏览器的渲染引擎有助于帮助大家预断HACK,后面的文章再讲啦。
  3. 单元测试CSS布局里面采用流式布局常常会相互影响,把各个模块分离出来单独调试。
  4. Clear这个是CSS布局中最让人头疼的问题了,需对clear产生的原因非常了解才能灵活运用。为什么需要clear,clear有什么好处,后面的文章讲。
  5. Reflow减少reflow的使用,具体的会写一篇专门关于这个的文章给大家哈。
  6. 小技巧记住一些不得不记的小技巧,如图片垂直居中等。