ie圆角,19px,挥之不去的最小高度

拿别人做的圆角模板,在非IE下好好地,到IE下就是变了形。原因是td中那个高度老是莫名其妙的有19px。

后来看到这篇文章:

http://dancewithnet.com/2007/07/26/ie6-height-bug/

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

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

 

照此,我将样式设置为overflow:hidden

将td中的img改为td背景图片,//使用img就会撑大

在td中增加&nbsp;

增加样式line-height:0

这才解决问题。


Total views.

© 2013 - 2024. All rights reserved.

Powered by Hydejack v6.6.1