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

问题描述

问题在于，当包含在具有均匀高度/行高且字体大小不均匀的元素中时，基于Firefox和WebKit的浏览器似乎以不同的方式垂直对齐文本.我看过一些类似的主题，但是对于我的问题，我还没有真正看到任何很好的解释.

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

请考虑以下示例:

.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>

有什么办法可以解决这个问题?是否有任何文字对齐"功能?财产还是我错过的东西?

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 vs Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！