Question

有人可以帮助我在div中垂直居中文本，在浏览器中保持一致。仅在IE9中，文本是靠近父div顶部的一个像素。所有其他浏览器都按预期呈现文本。

重要提示：我正在使用标准模式：

<!DOCTYPE html>

以下是一些HTML示例：

<!DOCTYPE html>
<div style="width:100px; height:16px; font-size:13px; font-family:Arial; line-height:1.2; background-color:red; color:White; vertical-align:middle">
<div style="line-height:16px">XXXXXXXXXX</div></div>

Answer 1

有点迟到了。但是，我最近遇到了类似的问题。经过一番挖掘后，我发现了这篇文章：Sub-pixel Fonts in IE9。

我认为这直接导致了IE9中字体垂直对齐的问题。不幸的是，似乎没有修复，因为这是一个强制选项或用户可自定义（不太可能发生）。

所以看起来唯一的解决办法就是如前所述增加行高。

Answer 2

您可能需要查看以下内容：

CSS: Standard (dynamic) way to centralize an element in the y-axis

有一些有用的参考资料可能仍适用于IE9。

根据您的代码：您在多个地方设置行高。尝试删除内部div中的line-height:16px属性，实际上，除去内部div，因为vertical-align只会影响内联元素。

另外，请确保容器高度足以容纳文本（1.2 * 13），否则您可能会遇到与浏览器中不同字体或不同默认字体大小相关的问题。

可能发生的事情是1.2 * 13 = 15.6，并且取决于浏览器如何舍入浮点数，这可能导致1个像素的移位。将行高设置为16px而不是1.2，看看是否有效。

第二次尝试：

.outer {
    background-color: red;
    color: white;
    width: 100px;
    height: auto;
    padding-top: 0px;
    font-family: Arial, sans-serf;
    font-size: 13px;
    line-height: 5.0;
}

适用于：

<div class="outer">XXXXXXXXXX</div>

如果有什么能解决这个问题，请使线高足够大，以便在字母上方/下方留出一些空间。将容器高度设置为auto，并让行高控制容器的高度。

Answer 3

这里有一个问题的答案：

http://www.sitepoint.com/forums/css-53/text-alignment-w-ie9-standards-mode-745359.html

我在1px off文本渲染时遇到了同样的问题，它只会在IE9中显示字体大小为13px。

添加css样式

    {
      height: 16px;
      line-height:16.99px;
    }

到周围的div修复了我在IE7-9，FF和Chrome上的问题。

在标准模式下使用IE9进行文本对齐

3 个答案: