《精通CSS：高级Web标准解决方案》学习过程--V

第九章：bug

在这个行当，bug,这个人见人爱的东西，人人都见过，那么你有没有系统的学过，不是记下所有的bug以及相应的处理方法（我是记不住），那么追究产生bug的原因就显得很重要了。其实css不复杂，只不过是不同浏览器的不同表现带给了大家的噩梦。在正确理解css规范的基础上，熟悉不同浏览器的表现机制，离解开这个问题的目标就不远了。

1.很多时候bug不是bug；

说的什么鬼？！。好吧，说人话，很多情况下，我们自己在coding时书写的问题，比如忘记标点，属性用错等都会导致这些问题。

2。典型的外边距叠加问题；

外边距叠加会导致一些列问题，这是因为块级元素计算高度的方法决定的：在没有内边距和边框的情况下，高就是子元素顶部底部边框边缘的距离。

栗子：

                      <style>
			*
				margin: 0;
				margin: 0;
			}
			.secBox{
				margin: 10px;
				background: #ccc;
				padding:1px;
			}
			.secBox p{
				margin:20px;
				background: #ece;
			}
		</style>
			
		<div class='secBox'>
			<p>111111111111111was founded in 1948.<p>
		</div>

希望的效果：                                                                                              

    

   实际效果：

 

解决办法  ：设置边框 或者内边距即可 

TIps ：1。遇到问题可以隔离该元素 比如设置边框、增加背景色等。2。采用chrome或者firefox的调试工具，这东西呢真心强大！ 3，采用常规的解决iE问题的方法，比如display:inline   position:relative;等 4  创建基本测试页面，去掉一切不必要的代码。

3。IEbug问题来源；

   IE的引擎中使用了一个have layout的概念，用以减少开销，但却导致各种噩梦。一些元素没有布局，可能会导致很多问题，可以隐式的设置css 使该元素具有布局，可以解决很多问题。ie7修复了很多目前可见的bug,但是主要还是根据具体bug通过补充，而不是修改底层代码的方法。

默认拥有布局的元素包括：body  html table tr td img hr  input  select textarea button iframe embed object applet  marquee;  

隐式的使元素具有布局：float:left /right  display:inline-block; width:任何值 height:任何值 zoom：任何值   min-hight:任何值 overflow:hidden scroll 或者auto。 

现存的主要bug的类别如下：

1.IE6和低版本的ie浏览器中p如果具有布局.一般为设置高度（若设置float:left 会导致在在标准浏览器下为新的段落） ，那他就是矩形，不能形成环绕图片的段落

2..IE6和低版本的ie浏览器，拥有布局的元素会自动的错误扩张，以适应里面的内容，实际我们希望的却是内容溢出；

栗子：

3.相对定位的元素没有布局

4.拥有布局的元素不会收缩

5.布局元素对浮动自动清理

6 拥有布局的元素之间的外边距不叠加

7.在没有布局的块级链接上 

具体的bug以后补齐，一些我也没有遇见过，毕竟现在对IE6的兼容也少了很多了

4 常见的IE6及低版本IE中的bugs和处理方法

1。双边距浮动bug

   解决办法：display:inline;

2。 3px文本偏移问题

书中的例子是有问题的  p 必须设置高度 这样才具有布局  才能出现这个三像素的问题。

解决 ：专门为IE6设置浮动

具体参考 这个   http://www.cnblogs.com/JohnnyChen/archive/2012/11/02/2750114.html

3。IE6重复字符的bug

   解决办法：去除注释；

4.躲猫猫bug  

解决办法：1设定高度 2浮动元素的position：relative 3 去除背景（不合理） 

5.相对容器的绝对定位

解决办法：为布局容器提供任意高度