Css 容器中文本的垂直对齐：WebKit与Firefox

问题在于，Firefox和基于WebKit的浏览器在包含在高度/行高均匀且字体大小不均匀的元素中时，似乎以不同的方式垂直对齐文本（反之亦然）。我已经看过一些类似的线索，但我还没有看到对我的问题有什么好的解释

考虑以下示例：

.box{
字体大小：15px；
字体系列：Helvetica，Arial；
背景颜色：蓝色；
高度：20px；
宽度：60px；
颜色：白色；
线高：20px；
}

文本。

---

有办法解决这个问题吗？是否有任何“文本对齐”属性或我遗漏的内容？

这是浏览器呈现问题。使用小于给定高度1px的线条高度，例如：

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

---

如果您正在寻找一种精确垂直对齐的方法，请查看堆栈溢出问题——我在这里描述了一个解决方案

如果你想知道为什么Firebug和Chrome的显示方式不同，这将有点复杂。行高对齐是基于字体行渲染的，在不同的浏览器中处理字体的方式非常不同。例如，字体平滑和字体重量会使页面变得混乱

---

另外，您是否正在为此页面使用CSS重置？它还包含与字体相关的调整，并可能帮助您克服跨浏览器问题。请参阅。

这是由于浏览器处理亚像素文本定位的方式不同造成的。如果您的行高为20像素，但字体大小为15像素，则文本需要位于距行框顶部2.5像素的位置。实际上就是这样（然后根据需要在绘制时消除锯齿或捕捉到像素网格）。WebKit只是在布局期间将位置舍入为整数像素。在某些情况下，这两种方法给出的答案相差一个像素。除非你把它们并排比较，否则你怎么知道它们之间有区别呢

---

在任何情况下，如果您真的需要，确保您的半前导是一个整数（即，行高减去字体大小是偶数）将使渲染更加一致。

啊，太糟糕了，但却是真的！我只是在试图在一个图标上创建一个微小的计数气泡时遇到了这个问题——它太小了，以至于我不得不在文本旁边找到它，这样每个像素都会计数。使行高小于文本大小1x会使FF和Chrome之间的显示字段变平。

这很好，但仅适用于非输入/按钮元素。我还没有弄清楚确切的原因，但是在button、submit或reset类型的输入元素或任何类型的button元素上设置一个固定的高度会设置元素的外部宽度，而不是像其他标准元素（包括a、span和div.Lol，+1）那样设置内部宽度，因为我处于制作“微小计数气泡”的相同情况（评论的数量之类的）实际上，一个像素差是显而易见的。