容器中的垂直对齐文本WebKit和Firefox [英] Vertical alignment text in container WebKit vs Firefox

问题描述

问题是，当基于Firefox和WebKit的浏览器包含在具有均匀高度/行高和字体大小不均匀（或反之亦然）的元素中时，它们似乎以不同的方式对齐文本垂直。我看了一些类似的线程，但我没有真正看到我的问题的任何伟大的解释。

The problem is that Firefox and WebKit based browsers seem to align text vertical in different way when contained in a element that have a even height/line-height and the font-size is uneven (or vice versa). I have looked at some similar thread, but I haven't really seen any great explanation for my question.

考虑 http：// alternativeto。 net / test2.htm 。这是一个非常简单的页面，只有

Consider http://alternativeto.net/test2.htm. This is a really simple page with just

    .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

If you open that page up in Chrome and Firefox you notice that they align the texts in different ways: http://screencast.com/t/tjgA2d7T

有任何方式来解决这个问题？是否有任何text-align属性或我错过的东西？

Is there any way to fix this? Is there any "text-align" property or something that I missed?

推荐答案

这是浏览器渲染问题。使用比给定高度小1px的行高，例如：

This is browser rendering issue. Use line-height 1px less than the given height, for example:

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

这篇关于容器中的垂直对齐文本WebKit和Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！