《精通CSS》第九章 浏览器常见bug

1. 外边距叠加的问题

- 具有块级子元素的元素计算高度的规则：如果没有垂直边距或内边距，它的高度就是它包含的子元素的顶部和底部边框边缘的之间的距离

- 子元素的外边距大于父元素的外边距，父元素不是包围了子元素，而是子元素突出了。

- 让外边距不再叠加：增加内边距或边框。

2. IE浏览器的haslayout是怎么回事？

前几天看博客的时候也看到了haslayout这个词，还不明白，正好就在书上看到了。

- 拥有layout的元素不会环绕在float元素周围，元素会被限制为矩形。

- 设置一些属性会让元素haslayout，（javascript中的.hasLayout函数可以查看）

  浮动、inline-block、width、height、zoom、writing-mode

   IE7中， overflow（hidden、scroll、auto）、min-width、max-width

- haslayout的元素如何确定自己的尺寸

计算尺寸的方法：

内容区的宽度可以破坏元素设定的宽度，内容区会让元素扩展。

3. IE条件注释

<!--[if IE 6]>
<!--[endif]>

<!--[if lt IE 6]>
<!--[endif]>

<!--[if gte IE 6]>
<!--[endif]>

gt——greater than

gte——greater than or equal

lt——less than

4. IE星号hack

由于lte IE6中，有一个匿名元素包含着html元素

因此可以写

* html{

}

5. 双边距浮动bug

设置inline

6. 3像素文本偏移

文本与浮动元素相邻时，会出现3像素的文本缩进。

可以让文本haslayout，然后消除文本偏移。

7. IE 6的重复字符bug

多个浮动元素的第一个和最后一个中有多个注释时，出现bug。

从第三个注释开始，每个注释导致两个字符。

8. IE6 藏猫猫

清理元素碰到了浮动元素，包围了浮动元素的非浮动元素会藏到父元素的背景后面。

让清理元素与浮动元素避免接触

- 容器元素加固定的尺寸

- 指定容器行高

- 浮动元素、容器元素的position设置为relative

9. 绝对定位

相对定位的容器没有haslayout属性，不创建新的定位上下文，

因此，让容器拥有haslayout属性即可。