读书笔记 精通CSS 高级Web标准解决方案（第2版）第9章

第九章 BUG和修复BUG

如何跟踪CSS BUG

神秘的hasLayout属性

hack和过滤器

常见BUG和修复办法

分级浏览器支持

捕捉BUG

最常见的CSS问题并非来自浏览器BUG，而是来源于对CSS规范的理解不完整。为了避免这些问题，在处理CSS bug时最好假设是自己做出了什么事。只有确认不是自己的错之后，才应该考虑是否是浏览器bug

常见CSS问题

特殊性和分类次序的问题

如果发现添加的样式没有效果，那常常是特殊性问题。不要随便添加更特殊的选择器，因为这可能会给代码的其它部分带来特殊性问题。更好的方法往往是删除额外的选择器。让它们尽可能一般化，只在需要细粒度的控制时添加更特殊的选择器。

外边距叠加问题

之前章节有解释过。

捕捉bug的基本知识

第一步是检查HTML和CSS是否存在打字和语法错误。然后检查DOCTYPE是否正确。选择更符合标准的浏览器作为主要的开发浏览器。记住，不要把浏览器测试留到项目快结束的时候，应该采用连续测试方法。在项目开发过程中用所有主流浏览器检查页面，这样就不会再项目快结束时又突然发现许多问题。

隔离问题

一旦确信出现了bug，就需要尽力隔离问题。通过隔离问题和识别症状，有可能解决问题。有时候，仅仅添加边框就会修复问题，这往往说明存在外边距叠加问题。如果框之间的间隙在IE中加倍了，那么可能遇到了IE的双外边距浮动BUG。

创建基本测试案例

复制出错的文件，删除多余的HTML，只留下最基本的内容，然后开始注释样式表知道查明bug。

修复bug而不是修复症状

知道问题的根源，对于实现正确的解决方案是非常有利的。因为给站点应用CSS样式有许多方式，最容易的解决方式就是回避这个问题。如果外边距导致了问题，那么考虑用内边距来代替。如果一种HTML元素组合出现了问题，那么可以考虑换一种组合。

hasLayout

Windows上的IE使用布局概念来控制元素的尺寸和定位。那些拥有布局（have layout）的元素负责本身及子元素的尺寸设置和定位。如果一个元素“没有拥有布局”，那么它的尺寸和位置由最近的拥有布局的祖先控制。IE的显示引擎利用布局的概念减少了很多处理开销。布局概念是Windows上特有的，而且不是CSS属性。尽管设置某些CSS属性会使元素拥有布局，但是CSS中无法显示地设置布局。可以用JavaScript函数hasLayout查看一个元素是否拥有布局。这个属性是只读的。

布局效果

布局是许多IE显示BUG的根源。例如，文本不会围绕浮动的元素而是强制为矩形。布局似乎会清理其中包含的浮动元素，就像是设置了overflow：hidden。Windows上IE的width更像是min-width。这种行为会破坏浮动布局。其它问题包括：拥有布局的元素不会收缩；对浮动元素自动进行清理；相对定位的元素没有布局；拥有布局的元素之间外边距不会叠加；没有布局的块级链接上单击区域只覆盖文本；滚动时，列表项上的背景图片会间歇性地显示和消失。

庆幸的是，IE8开始使用了全新的显示引擎，这些问题迎刃而解。

IE条件注释