注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

魑魅魍魉福'HOME

见证成长

 
 
 

日志

 
 

ie6 div height bug css注意点(转)  

2011-08-23 15:04:30|  分类: Web开发 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
所有浏览器的定位都大同小异,在各个浏览器兼容性问题,要了解各个浏览器的定位区别就可以了。 比如,当用float浮动时,同时设置margin或padding在IE6中会是双倍的值。即你设置为margin:10px;那么在IE6里就相当于margin:20px;  出现这样的问题往往会早成定位偏移。你参考相关兼容性的相关注意点就可以了。多点动手写。   

①  IE6下默认的字体尺寸大致在 12 – 14px 之间,当你试图定义一个高度小于这个默认值的 div 的时候, IE 会固执的认为这个层的高度不应该小于字体的行高。所以即使你用 height:4px; 来定义了一个 div 的高度,实际在 IE 下显示的仍然是一个 12 px 左右高度的层。添加overflow: hidden; 解决问题。
<div style=”height: 4px; overflow: hidden;”></div>

②  应该多加一个属性:font-size:0px;就可以了.

 

③  

首先要看DIV有无内容,然后才会决定谁影响其高度:

  1. 当DIV为一个空标签的时候:DIV有一个默认的高度(大约20px左右吧),如果hiehgt的值小于这个数字,DIV不会有任何反应,大于则可以控制;而line-height在这儿根本没有用,因为没有内容,所以也就不存在行高了。
  2. 当 DIV标签内有内容时(哪怕是一个&nbsp;):DIV的高度依然是默认的(依旧是20px左右),而这时候的height仍然只能 设置大于这个数的值,否则DIV不会受控制;但是,这时候却可以使用line-height来控制DIV的高度,准确来说是控制DIV内的内容行高,使 DIV受行高的变化而变化。
    不过,如果你设置了height的值,那么当line-height小于height的值的时候,DIV取的是height的 值;如果line-height大于height的值,那这时候影响DIV高度的就是line-height的值了。

在其它的浏览器就不会出现这个问题,也就是说line-height大于height的时候,DIV的高度依旧是height,最多是看不见内容,但DIV的高度不会被line-height所控制。

期间有一个朋友评论说“使用overflow:hidden;第二种情况也是由height来控制了”:嘿嘿,试了一下,的确如此,当DIV的高度被line-height撑高的时候,使用overflow:hidden;则会使超出DIV高度那部份的内容不可见,从而使DIV的高度受hiehgt控制。

  评论这张
 
阅读(1111)| 评论(1)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018