第九章--bug和修复bug

第九章 bug和修复bug
浏览器的表现不一致是大多数CSS开发人员面临的主要难题。所以在弄清楚各种bug是什么情况的时候，才能想办法对付它。 


本章学习：


☆如何跟踪css的bug 
☆Haslayout属性
☆hack和过滤器
☆常见的浏览器bug和修复方法
☆分级浏览器支持


捕捉bug 
在处理CSSbug的时候最好是假设自己做错了什么事，只有确定不是自己的代码问题的时候再去怀疑是不是浏览器的bug.
所以，在开发的时候最好选好一点的CSS编辑器，有代码补全功能：如SKEdit ，CSS Edit。 这能防止基本的错误产生。


常见的CSS问题：
 语法错误，特殊性和分类次序的问题，最新的代码规范，外边距叠加的问题（添加内边距或边框）


【工具：FireFox的Firebug附加组件（https://addons.mozilla.org/en-US/firefox/addon/1843）是调试CSS的好工具， 其中之一是可以通过查看元素了解哪些CSS被覆盖了。】


捕捉bug的基本知识：


1.检查自己的HTML和CSS查看语法或者拼写错误
2.检查DOCTYPE
3.用主流的浏览器测试
4.尽量在一开始就避免bug




隔离问题：
1.在相关元素上应用边框或轮廓，尝试修改属性，扩大化效果帮助。 例如将position的属性设置为relative， 将display的属性设置为inline（在浮动元素上）或者设置宽度
等尺寸，就能修复许多bug. 




建基本的测试案例：




修复问题而不是修复症状：
学会调研


学会网上请求帮助：css社区
（www.css-discuss.org）Web standards group . 


9.3拥有布局


IE表现的和其他的浏览器不同的原因之一是，显示引擎使用的是 称为 布局（layout）的  内部概念。 
布局问题是许多IEbug的根源，所以理解这个概念以及他如何影响CSS是有帮助的。


windows 上的IE使用布局的概念来控制元素的尺寸和定位。 那些拥有布局的元素负责本身和其他子元素的尺寸设置和定位。 如果一个元素没有拥有布局，那么他的尺寸就是有离它最近的拥有布局的祖先元素控制。 
IE引擎利用布局概念减少处理的开销。 在理想的情况下，所有的元素都控制自己的尺寸的定位。 但是在IE中这回导致很大的系统问题，因此IE的开发团队决定只将布局应用到实际需要的那些元素，这样就可以充分的减少系统性能的开销。


在默认的情况下拥有布局的元素：




body 
html(标准模式中)
table
tr,td
img
hr
input select textarea button
ifream embed object applet
marquee


布局概念是IE上特有的，而且不是CSS属性。 尽管某些CSS属性会让元素拥有布局，但是在CSS中无法显式的设置布局。 可以使用Javascript的函数hasLayout查看一个元素是否拥有布局。 


设置以下CSS属性会让元素自动的拥有布局：




float:left\right


display:inline\block


width：任何值


height:任何值


zoom:任何值


writing-mode:tb-rl


在IE7中，以下属性也是布局触发器


overflow:hidden \scroll \auto


min-width:


max-width:






布局导致的IEbug
1，图文混排中，文字段落设置了高度或其他什么使之拥有布局， 它就会被限制成矩形，阻止文字围绕浮动的图片。 
2，某些元素，布局似乎清理了包含浮动的元素， 就像设置了overflow:hidden. 
3, 拥有布局的元素如何确定自己的尺寸，如果元素的内容超过了元素本身，我们希望他溢出，但是IE会错误的扩展以适应内容的尺寸。（这使width实际上更像min-width）
4，拥有布局的元素不会收缩
5，布局元素对浮动进行自动清理
6，相对定位的元素没有布局
7，没有拥有布局的元素之间的外边距不叠加
8，没有布局的块级链接上，单击区域值覆盖文本（所以，不是按钮的样子）
9，再滚动时，列表向上的背景元素间歇性的显示和消失




9.4.1 IE条件注释


条件注释是（一种专有的）常规的HTML的Microsoft扩展，是处理IE bug的最好方法。 条件注释在IE5上首次出现，并且得到浏览器后续版本的支持。


想要提供给IE5和更高的所有版本，可以在HTML问到的开头放置代码：
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/css/ie.css"/>
<![endif]-->
在IE5中会接收ie.css，而其他浏览器只看到一些被注释掉的文本。 
指定特定浏览器;
 
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/css/ie.css"/>
<![endif]-->


条件注释的及其有效，而且非常容易记住。 主要缺点是这些注释需要放在HTML中，而不是放在CSS中，要是发现新的IE浏览器版本，不得不更新每个页面中的注释。


条件注释除过为IE提供样式表以外，还可以使用它们隐藏他定的样式表。 
<!--[if !IE]>
<link rel="stylesheet" type="text/css" href="/css/advnced.css"/>
<![endif]-->
hack的一个警告


CSS作为一个语言，设计成具有很强的向前兼容器。 如果浏览器不理解某个选择器，那么它会忽略整个规则。 


有关更多的hack以后再看。




9.5 常见的bug以及修复方法




CSS开发人员最重要的技能之一就是发现常见的浏览器bug。了解导致这些bug的可以在他所们造成问题之前发现并修复他们。
1. 双外边距浮动bug
最常见且最容易发现的一个bug。这个bug使任何浮动的元素的外边距加倍。


这个bug和容易修复，将元素的display属性设置成inline就行了。 因为元素师浮动的实际上设置display的属性inline不会影响其显示方式。所以在具有水平外边距的元素浮动时，都应该自然地将display的属性设置为inline。以备将来的外边距加大。




2.三像素文本偏移bug
Windows IE5 IE6 上一个常见的bug，当文本与一个浮动元素相邻时，这个bug就表现出来。  假设一个元素向左浮动，并且不希望相邻的段落围绕它，那么可能给段落应用一个左外边距，宽度刚好等于浮动元素的宽度。 那么文本和浮动元素之间莫名其妙的会出现一个三像素的间隙。
.myfloat{
width:200px;
float:left;
}
p{
marign-left:200px;
}


/修复这个bug要双管齐下。 首先给包含文本的元素设置任意的高度，这会让元素被迫拥有布局，在IE中的高度height实际上会按min-height解析，所以不会影响到这些元素在浏览器中的实际尺寸。 但是，会影响到其他的浏览器，所以要对除了IE6以外的所以其他浏览器隐藏这个规则。最好的方法是使用注释将这些样式转移到单独的CSS文件中。
p{
height:1%;
}
迫使段落元素拥有布局的时候会导致另一个问题，浮动元素和段落之间有200px的间距。 所以将p的外边距重新设置为零：
p{
height:1%;
margin-left:0;
}
此时文本偏移被修复了，但是另一个三像素的间隙出现了，这一次是在浮动元素上，为了去掉这个间隙，在浮动元素上这只一个三像素的右外边距。
.myfloat{
margin-right:-3px;
}
如果浮动元素是除过图像以外的其他元素，那么这个问题已经修复了，但是如果是图形，还有最后一个问题要解决。
： IE5.x在浮动元素的左右都添加三个像素的间隙，IE6.x不改变图像的外边距：


所以支持IE5.x
.myfloat{
margin:0 -3px;
}
支持IE6.x
.myfloat{
margin:0;
}


3.IE6的重复字符bug
在某些情况下，一系列浮动元素的最后一个元素中的最后几个字符会在浮动元素下面重复出现。
当一系列浮动元素的第一个和最后一个元素之间有多个注释时候会出现这个bug，前两个注释没有影响，但是后续的每个注释会导致两个字符重复出现。 所以三个注释会导致两个重复的字符，四个注释会导致四个充分的字符，五个注释会导致六个重复的字符。 


尽管在ie6中我们可以修复这个bug但是在IE7中可能没有这个bug所以，最好的最安全的方法是删除HTML中的注释。


4.IE6的藏猫猫bug
藏猫猫（peek-a-boo）bug，在某些情况下文本看起来消失了，只有在重新加载时候会重新出现。  


出现这个bug的条件是：包含在一个设置了背景颜色或图像的父元素中的 浮动元素后面跟着一些非浮动元素，然后是一个清理元素， 中间的非浮动元素看起来消失了实际上是隐藏到父元素的背景图像或者颜色后面，只有在刷新页面时才会闪现。




现在有许多方法可以解决这个问题。 最简单的是去掉父元素的背景颜色或图像。 但是这常常是不行的。 另一个方法是避免清理元素与浮动元素接触。 如果容器应用了特定的尺寸，这个问题似乎就不出现了。 如果给容器指定行高这个bug也不会出现。 最后将浮动元素和容器元素的position设置为relative也会减轻这个问题。


5.相对容器的绝对定位。
最后的一个浏览器bug与容器中的绝对定位元素有关定位相对元素有关。 前面讲了这种定位嵌套在相对容器中是多么有用。 但是IE6和更低的版本使用这个时候却又许多bug。 这些bug的原因是相对定位的元素没有获得IE/Win内部的haslayout属性。 因此，他们不创建新的上下文，所有绝对定位的元素怒相对于视口进行定位。


为了使IE6和更低的版本表现正确，需要迫使相对定位的元素拥有布局。一种方法是在容器上显式的设定height和width。但是我们常常不知道容器的高和宽，或者需要这些属性保持灵活的情况下使用这些技术。 


我们可以通过条件注释过滤IE5和IE6， 为容器的布局提供一个任意的高度。 这会让容器又有布局，所以给容器设置小的高度不会影响到实际高度。
.container{
height:1%;
}






9.6 分级浏览器支持
划分浏览器支持的级别 ，具体的站点决定支持的实际意义。
首先，确定一组最新的浏览器，使用用户最多的。FireFox、Safari、Opera、以及最新的IE7 IE8 这一类浏览器。
接下来，确定一组已经过时但是任然比较重要的浏览器，可能包括FireFox、Safari 的老版本以及IE6 。
最后确定一组完全过时的比不想支持的浏览器。IE4 、Netscape Navigator 4和Opera 7…… 可以接受非常显著的设计变化。 最好是完全取消样式。


针对每个具体的项目，创建自己的分级支持表。