专注于网站建设和搭建网络营销体系
商视互联,北京做网站公司
北京做网站,商视互联 您的位置:网站首页 > 商视动态 > 网页设计 > 正文
让网页布局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、拖动滚动条?#21271;?#26694;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文本?#25442;?#25442;行,文本会在在同一行上继续,直到遇到 <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里设定的格式都么有显示出来。把注释去掉就显示正常了。如果没要用中文注释请将注释改成/*这里是注释内容**********/ 这样就可以显示了

本文网址:
更多

切尔西欧联夺冠整容
海南排列四开奖结果 北京十一选五走势图手机版手机版 内蒙古11选五 河内五分彩技巧经验心得 安徽11选5走势图360 黑龙江爱彩乐11选5走势图 极速快三开奖分析 pk赛车正规吗 河北十一选五开奖走趋图 苏州体彩11选5一定牛 pc蛋蛋开奖可以控制吗 3D福彩下载 全民欢乐捕鱼OL 秒速时时预测软件 双色球十大专家预测汇 奇趣分分彩是什么台子