问题是,基于Firefox和WebKit的浏览器似乎在包含在具有均匀高度/线高的元素中,并且字体大小不均匀(或反之亦然)时,以不同的方式将文本垂直对齐.我已经看了一些类似的线程,但是我没有真正看到我的问题的任何很好的解释.
考虑http://alternativeto.net/test2.htm.这是一个非常简单的页面
.Box { font-size: 15px; font-family: Helvetica,Arial; background-color: Blue; height: 20px; width: 60px; color: White; line-height: 20px; }
和
<div class="Box"> A text. </div>
如果您在Chrome和Firefox中打开该页面,您会注意到他们以不同的方式对齐文本：http://screencast.com/t/tjgA2d7T
解决方法
这是浏览器渲染问题.使用line-height 1px小于给定的高度,例如：
.Box { background-color: Blue; color: White; font-family: Helvetica,Arial; font-size: 15px; height: 18px; line-height: 17px; width: 60px; }
