IE6、7中的关于浮动的BUG笔记

1.      在IE6、7下元素浮动时，并在同一行的元素都要加浮动，才能让在IE6、7下两个不同块的元素在浮动时，其之间不存在空隙。

2.      IE6下的双边距BUG问题：在IE6下，块元素浮动且具有横向的margin值时，横向的margin值会被放大成两倍。解决办法：在元素的样式中加入“display:inline;”。

3.      在IE6、7下li的几个像素的间隙问题：在IE6,7下li本身没浮动，但是内容浮动了，于是li的内容下就会多出来几个像素的间隙。其解决办法为：

A.     给li也加浮动，但会出现很多问题，需要添加很多样式，麻烦！

B.     给li加“vertical-align:top;”（推荐）；

4.      vertical-align表示垂直对齐方式，top表示顶部对齐，middle表示中间对齐，bottom表示底部对齐。注意，在用时一定要在多个对象上都加入代码语句。同时，这个样式对浮动元素是无效的，元素浮动之后，默认是顶部对齐。如果要更改浮动元素的对齐方式，只能通过设置上下边距进行控制。

5.      vertical-align还可以用来清除图片下面的空隙，值得一提的是将图片设置为block也可以清除图片下面的空隙，可是，一张图片就只能独占一行显示了，而overflow不存在这个问题。

6.      在IE6下高度小于19px的元素，高度会被当做19px来处理。其解决办法为：

A.     在样式中加入“font-size:0;”，但是这种方法却以牺牲文字的大小为代价，不推荐；

B.     在样式中加入“overflow:hidden;”（推荐）；