ie中的字体行高bug —— line-height bug

于 2009-02-25 09:50:32 发布 · 282 阅读

文章标签：

本文探讨了Internet Explorer中常见的字体行高Bug，即当未明确设置line-height和font-size时，IE会显示非预期的高度。文章提供了两种解决方案：一是通过精确设置字体大小和行高；二是使用溢出隐藏属性。

ie中的字体行高bug —— line-height bug
在 firefox 中，无论你要定义一个div的高度是多少，firefox都能准确显示，而在ie中，我们会遇到这样的问题：如果我们没有定义一个div的 line－height 和 font－size，那么一般情况下你定义一个高5px的div，通常你会看到一个高为12px的 div。

　　这是因为ie默认的字体大概是12---14px之间，故这个div的高度无法显示为你指定的高度。

　　要解决这个问题，有两个办法：
　　如　:

<div class=" height:5px; font: 1px/1px Arial; "></div>

或者　<div class=" height:5px; line-height: 1px; font－size:1px; "></div>

另外一个办法,则不提倡使用,那就是运用　溢出隐藏　这个属性来解决　.即在代码的　css中加入　overflow: hidden.

　　从这个想到一个问题,为什么我们要在一个不标准化的浏览器中实现网页的标准化?无论是ie还是firefox对css的支持都是有限的.