第九章 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开始使用了全新的显示引擎,这些问题迎刃而解。