《精通CSS高级WEB标准解决方案》第九章、bug和bug修复

我在www.c09.com 发表了这个笔记并上传了原著的PDF，今天有空，转到BLOG上来。

第九章、bug和bug修复
9.1 常见CSS问题[code]
/*以下代码视图让所有.intro的段落显示橙色的背景*/
#content p{
    background-color:transparent;
}
.intro{
    background-color:#FEECA9;
}
/*以上代码失败的原因是.intro的优先级小于#content，解决方式如下*/
#content .intro{
    background-color:#FEECA9;
}
/*空白边叠加问题*/

   

This paragraph has a 20px margin.

/*对以上代码设置CSS试图留出足够的空白边*/
#box{
    margin:10px;
    background-color:#d5d5d5;
}
p{
  margin:20px;
  background-color:#6699ff;
}
/*失败的原因是垂直方向的空白边距离叠加了，而且p的垂直空白边突破了box的空白边，使之不可见，解决方法是给box加一个填充值，使之不被叠加*/
#box{
    margin:10px;
    padding:1px;
    background-color:#d5d5d5;
}
p{
  margin:20px;
  background-color:#6699ff;
}
[/code]9.2 Bug捕捉的基本知识
1、隔离问题[code]
#promo1{
    float:left;
    margin-right:5px;
    border:1px solid red;/*用边框隔离问题*/
}
#promo2{
    float:left;
    border:1px solid green;
}
[/code]将position设置为relative、将display设置为inline或是设置宽度和高度的尺寸，就可以修复很多IE问题
2、创建基本测试案例
复制出问题的文件，删除多余的XHTML，只保留基本内容，然后开始注释掉样式表或其中的代码块，直到问题消失
3、修复问题而不是修复症状
4、去社区寻求帮助
9.3拥有布局
IE与其它浏览器的一个显著不同就是它的元素拥有自己的布局，很多时候这将导致IE与其它浏览器显示不同，例如：

• 
  
• 一个文本段落靠着一个浮动元素时，其它浏览器会环绕元素，IE则将段落显示为矩形;
• 定义了元素的width后，如果元素中的内容比元素本身大，那么内容会流出元素外，但在IE中则会扩展元素大小；
• 拥有布局的元素不进行收缩；
• 布局元素对浮动自动清理；
• 相对定位的元素不获得布局；
• 在拥有布局的元素之间空白边不叠加；
• 在不拥有布局的块级链接上，单击区域只覆盖文本

9.4常见BUG及其修复

• 
  
• 双空白边浮动bug
  浮动元素的空白边加倍，解决方法是把元素的display属性设置为inline
• 3像素偏移 bug
  IE中文本与浮动元素相邻时，会莫名其妙地空出3个像素。解决方法冗长繁琐。
• IE6重复字符bug
  当页面中一系列浮动元素之间存在多个注释时，行结尾会诡异地出现字符重复，最简单的解决方法是去掉注释。
• 躲猫猫 bug
  IE6浮动元素中的字符有时候会消失，刷新页面后才会显示。解决方法有多种，在书中P160页
• IE6的相对容器中进行绝对定位，会按上级元素位置进行定位