《精通CSS高级WEB标准解决方案》第九章、bug和bug修复
2010-04-22 11:49
330 查看
我在www.c09.com 发表了这个笔记并上传了原著的PDF,今天有空,转到BLOG上来。
第九章、bug和bug修复
9.1 常见CSS问题
1、隔离问题
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的相对容器中进行绝对定位,会按上级元素位置进行定位
第九章、bug和bug修复
9.1 常见CSS问题
/*以下代码视图让所有.intro的段落显示橙色的背景*/ #content p{ background-color:transparent; } .intro{ background-color:#FEECA9; } /*以上代码失败的原因是.intro的优先级小于#content,解决方式如下*/ #content .intro{ background-color:#FEECA9; } /*空白边叠加问题*/ <div id='box'> <p>This paragraph has a 20px margin.</p> </div> /*对以上代码设置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; }9.2 Bug捕捉的基本知识
1、隔离问题
#promo1{ float:left; margin-right:5px; border:1px solid red;/*用边框隔离问题*/ } #promo2{ float:left; border:1px solid green; }将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的相对容器中进行绝对定位,会按上级元素位置进行定位
相关文章推荐
- 精通CSS高级Web标准解决方案(6、对表单与表格应用样式)
- 精通CSS高级Web标准解决方案(2-2 可视化格式模型之定位概述)
- 读书笔记 精通CSS 高级Web标准解决方案(第2版)4~8章
- 《精通CSS高级WEB标准解决方案》第五章、对列表应用样式和创建导航条
- 精通CSS高级Web标准解决方案:相对定位与绝对定位
- 精通CSS高级Web标准解决方案:浮动
- 精通CSS高级Web标准解决方案(5、对列表应用样式和创建导航条)
- 读书笔记 精通CSS 高级Web标准解决方案(第2版)第9章
- 精通CSS--高级WEB标准解决方案(第一章)-------读书笔记
- 《精通CSS-高级Web标准解决方案》阅读计划
- 精通CSS高级web标准解决方案 下载
- 精通CSS高级Web标准解决方案(1-3 规划、组织与维护样式表)
- 最佳CSS书推荐:《精通CSS - 高级Web标准解决方案》
- 读书笔记--精通CSS高级Web标准解决方案(一)---CSS基础
- 再次阅读《精通CSS-高级Web标准解决方案(第二版)》
- 精通CSS高级Web标准解决方案(1-1选择器)
- 读书笔记--精通CSS高级Web标准解决方案(二)---CSS基础之CSS选择器
- 精通CSS高级Web标准解决方案【读书笔记】
- 精通CSS高级Web标准解决方案(3-1 背景图像与图像替换)
- 精通css高级web标准解决方案