css – 容器WebKit和Firefox中的垂直对齐文本

问题是,基于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

有没有什么办法解决这一问题？有没有任何“text-align”属性或我错过的东西？

解决方法

这是浏览器渲染问题.使用line-height 1px小于给定的高度,例如：

.Box
{
   background-color: Blue;
   color: White;
   font-family: Helvetica,Arial;
   font-size: 15px;
   height: 18px;
   line-height: 17px;
   width: 60px;
}

原文地址：https://www.jb51.cc/css/214246.html