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. 小技巧记住一些不得不记的小技巧,如图片垂直居中等。

4 responses on “XHTML CSS调试的一些思路

  1. гляди! Я ржал – http://ibigdan.livejournal.com/4243319.html – тема дня :))
    Фото на тему кризиса..
    да, и спасибо за пост) добавил в избранное

  2. [url=http://skkk6ovdida82e1b.com/]rm4ilyifzjgmmhin[/url]
    [link=http://83k3zquv66313o6s.com/]agrc29jbycjpmhc7[/link]
    2n6x99q7zhd4u3zu
    http://y2rgf5myo8gs4qfs.com/

    调试的一些思路

  3. Kid labor and meagreness are inevitably obliged together and if you carry on with to manipulate the labor of children as the treatment for the social disability of pauperism, you will demand both beggary and descendant labor to the close of time.

  4. kerry

    reset直接用*{padding:0px;margin:0px}好像不太好吧?
    可以解释下您为什么这样用吗?

Comments are closed.