Div+Css网页布局常见问题整理

1、拖动滚动条时边框IE时隐时现，办法：在边框的div中加overflow:hidden; height:100%（IE6.0）

2、li里直接使用img，底部多出几像素，办法：在img中加display:block

3、div浮动左（下）面多出几像素，办法：浮动中加：display:inline（IE6的BUG，margin在碰到float时会距离会加倍，也在浮动元素中加display:inline即可）

4、FF浏览器div内有浮动，顶部多出几像素，办法：在浮动外div中加：display:inline

5、有浮动内容的div在IE6下始终多出几像素空白，办法：加一行div，属性设置为：clear:both; height:0; line-height:0; font-size:0;

6、彻底清除浮动：.Clear{clear:both; font-size:0; height:0; line-height:0;}

7、ul中的li设置float:left后，li内的文字会换行，解决方法：li中加li { float: left; white-space: nowrap;即可

值描述normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。nowrap文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。pre-wrap保留空白符序列，但是正常地进行换行。pre-line合并空白符序列，但是保留换行符。inherit规定应该从父元素继承 white-space 属性的值。

8、img底部多出几像素，方法，在img元素加属性float:left属性；

9、在做一个后台布局是用到Tab切换，切换的内容是表格布局的数据，但发现火狐下切换时单元格宽度不能正常显示。（布局时，我在第二个开始的Tab内容加了.Hidden{display:none;}这个class，切换Js设置display属性）。解决办法：将class―Hidden去掉，换成style="display:none;"即可；原来是这个class在作怪。

10、CSS注释，在IE7 FIREFOX下运行正常，在IE6下面竟然一个CSS里设定的格式都么有显示出来。把注释去掉就显示正常了。如果没要用中文注释请将注释改成/*这里是注释内容**********/ 这样就可以显示了

11、解决使用了float后IE6下li高度比Firefox或者IE8高的问题：在ul的样式表中增加了zoom:1就ok了

12、要使float元素li不折行，这样做：

float:left;

padding-right:16px;

white-space: nowrap;

display:inline-block; （不能加overflow:hidden;）