跨锚浏览器垂直居中的文本

Question

我有以下JsFiddle： http://jsfiddle.net/JxXHE/

我想确保菜单项中的文字垂直居中，距离底部8倍。在所有支持的浏览器中排名第一。 以下是支持的浏览器列表： IE7，IE8，IE9 FF 3.6 - FF 10.0.2 铬 Chrome（Linux - 未指定版本） FF（Linux - 未指定版本）

我设法得到了非常接近的东西，但每一个我发现另一个浏览器以不同的方式显示它（这里/那里的像素）。基本上我不喜欢使用CSS黑客，但如果这将是最后的手段，我们将使用它们。

欢迎任何有关如何解决问题的帮助/想法。

谢谢， Nadav

Answer 1

我建议使用line-height。这是我在你的jsFiddle中修改的内容:(这里是我的jsFiddle）

.ContextMenuItem
{
    min-width: 180px;
    line-height: 27px; /* I added this */
}

基本上，你想要将字体大小（在这种情况下为11px）添加到垂直空间量（8px）乘以2（8x2 = 16,16 + 11 = 27）

不幸的是，这只适用于单行文本，否则会在多行之间产生空格。