CSS设置IE6中容器高度BUG

在IE6中设置display:block的空容器一个较小高度时,如<p style="height:1px;"></p>,会发现其高度不能小于某个值,比如在字体大小为12px时这个值是15px,在浏览器默认字体大小时这个值为19px,如演示1,你可以通过调整IE6中的“查看>字体大小”来观看这个高度的变化。解决方案:

  1. 设置font-size:0,但是这个容器的高度最小为2px,所以没有办法实现高度为1px的效果
  2. 在容器中增加内容或其他空标签,如&nbsp;、<br />,并设置line-height:0,但该容器会存在一个和其父容器字体大小有关的外边距,这个问题在IE7中也会出现,如演示6
  3. 在容器中增加内容或其他空标签,同时设置font-size:0,line-height:0,如演示7
  4. 上述解决方案在某些字体下会有非常大难以预料的变化,如font-family:fixedsys;时的演示
  5. 设置zoom:0.03,这个会受到font-size、font-family的影响而显示不同效果,并且在IE7下不可见,如演示11
  6. 设置overflow:hidden,这是目前看到的最完美的解决方案,如演示12

标签:,

作者:秦歌,时间:2007-07-26 0:19,归纳于:HTML & CSS,订阅:RSS 2.0,引用:Trackback

有评论 6 条,发表一条评论 »

火星人路人甲说:2007-07-29 6:09 #1

这一招似乎对td不管用。不论是否设置font-size,或是overflow:hidden,IE的td一定会顽固的占用十几个px。有没有办法设置一个只有两三个px的td呢?

秦歌说:2007-07-29 23:39 #2

td的display值是table-cell和block是有些不同,我想你之所以出现这个问题,可能是你的td容器中有&nbsp;字符导致,如果存在字符,td在firefox和IE中都会占取和字体大小有关的高度,即使设置overflow:hidden也无效,如演示1,解决方法如下:
1)line-height:0;如演示2
2)font-size:0;在ie中会存在2px高度问题,如演示3
3)去掉&nbsp;字符,如演示4

路人浏览说:2008-01-24 15:43 #3

制作的圆角框的css+div在ff和ie7下没有问题,但是就在ie6作为底部的背景会串下去??什么原因??谢谢!!!

秦歌说:2008-01-25 23:22 #4

呵呵,有没有演示的链接地址给一个看看,或者研究对比一下http://mail.yahoo.com

匿名说:2008-07-03 14:43 #5

好像加个line-height:1px就行了吧

falv说:2008-08-24 19:45 #6

学习了

发表一条评论

您可以在下面评论内容中使用下列XHTML标签:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

您或许有兴趣:

回到页眉