您的位置： 让网页布局DIV+CSS常见的问题远离你
作者：商视互联 来源：北京做网站 日期：2012/9/17 20:30:10 热度：℃ [ 标签：网页设计 ]
1、彻底清除浮动：.Clear{clear:both; font-size:0; height:0; line-height:0;}
2、在做一个后台布局是用到Tab切换，切换的内容是表格布局的数据，但发现火狐下切换时单元格宽度不能正常显示。（布局时，我在第二个开始的Tab内容加了.Hidden{display:none;}这个class，切换Js设置display属性）。解决办法：将class-Hidden去掉，换成style="display:none;"即可；原来是这个class在作怪。
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、拖动滚动条时边框IE时隐时现，办法：在边框的div中加overflow:hidden; height:100%（IE6.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、li里直接使用img，底部多出几像素，办法：在img中加display:block
10、要使float元素li不折行，这样做：
li
{
float:left;
padding-right:16px;
white-space: nowrap;
display:inline-block; （不能加overflow:hidden;）
}
11、解决使用了float后IE6下li高度比Firefox或者IE8高的问题：在ul的样式表中增加了zoom:1就ok了
12、CSS注释，在IE7 FIREFOX下运行正常，在IE6下面竟然一个CSS里设定的格式都么有显示出来。把注释去掉就显示正常了。如果没要用中文注释请将注释改成/*这里是注释内容**********/ 这样就可以显示了
2、在做一个后台布局是用到Tab切换，切换的内容是表格布局的数据，但发现火狐下切换时单元格宽度不能正常显示。（布局时，我在第二个开始的Tab内容加了.Hidden{display:none;}这个class，切换Js设置display属性）。解决办法：将class-Hidden去掉，换成style="display:none;"即可；原来是这个class在作怪。
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、拖动滚动条时边框IE时隐时现，办法：在边框的div中加overflow:hidden; height:100%（IE6.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、li里直接使用img，底部多出几像素，办法：在img中加display:block
10、要使float元素li不折行，这样做：
li
{
float:left;
padding-right:16px;
white-space: nowrap;
display:inline-block; （不能加overflow:hidden;）
}
11、解决使用了float后IE6下li高度比Firefox或者IE8高的问题：在ul的样式表中增加了zoom:1就ok了
12、CSS注释，在IE7 FIREFOX下运行正常，在IE6下面竟然一个CSS里设定的格式都么有显示出来。把注释去掉就显示正常了。如果没要用中文注释请将注释改成/*这里是注释内容**********/ 这样就可以显示了
本文网址：
相关阅读：
|
vip@34178.net 专注于网站建设和搭建网络营销体系-与您一起互联网上发现商机！
