CSS读书笔记（二）

浏览器常见bug以及修复。

1.双外边距浮动bug

　　最常见的bug是IE 6和更低版本中的双边距浮动bug，这个bug使任何浮动元素上的外边距加倍。

　　修复：display:inline

2.  3像素文本偏移bug

　　IE5和IE6上的bug，当文本与一个浮动元素相邻时，这个bug就会表现出来。例如将一个元素向左浮动，并且不希望相邻段落中的文本围绕浮动元素。你可能会在段落上应用一个左外边距。

　　.myFloat{

　　　　float:left;

　　　　width:200px;

　　}

　　p{

　　　　margin-left:200px;

　　}

　　如果这么做，在文本和浮动元素之间就会出现一个3像素的间隙。

　　修复：

　　p{

　　　　height:1%;

　　　　margin-left:0;

　　}

　　.myFloat{

　　　　margin-right:-3px;

　　}

3.IE6重复字符bug

　　在某些情况下，一系列浮动元素的最后一个元素中的最后几个字符会在浮动元素下面重复出现。

　　当在一系列浮动元素的第一个和最后一个元素之间有多个注释时，就会出现这个bug。前两个注释没有影响，但是在后续的每个注释会导致两个字符重复出现。所以，3个注释会导致连个重复字符，4个注释会导致4个重复字符，5个注释会导致6个重复字符。 这个bug似乎与前面的3像素bug有关。为了修复这个bug可以通过设置负的右边距从最后一个浮动元素上去掉3像素，或者使容器扩大3像素。但是，这两种方法可能在IE7中造成问题。

　　修复：从HTML中删除注释

4.IE6“藏猫猫”bug

　　一个浮动元素后面跟着一些非浮动元素，最后一个是清理元素，所有这些元素都包含在一个设置了背景颜色或图像的父元素中。如果清理元素碰到了浮动元素，那么中间的非浮动元素看起来消失了，隐藏到了父元素的背景颜色或图像后面，只有在刷新页面时才重新出现。

　　修复：最容易的办法是去掉父元素的背景颜色或图像，但是，这常常是不可行的。另外一个办法是避免清理元素与浮动元素接触。如果容器元素应用了特定的尺寸，那么这个bug似乎就不会出现了。如果给元素指定行高，这个bug也不会出现。最后，将浮动元素和容器元素的position属性设置为relative也会减轻这个问题。

5.相对容器中的绝对定位

　　IE6和更低版本在使用这个技术时会有许多bug。原因在于相对定位的元素没有获得IE的内部hasLayout属性。因此，它们不创建新的定位上下文，所有绝对定位元素相对于视口进行定位。

　　修复：使相对定位的容器拥有布局，一种方法是在容器上显式设置width和height。在不知道高宽的情况下可以使用条件注释过滤IE5 IE6,为容器提供一个任意高度。

　　.container{

　　　　height：1%;

　　}