有人可以帮助我在 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>
【问题讨论】：
聚会迟到了。但是，我最近遇到了类似的问题。经过一番挖掘，我发现了这篇文章：Sub-pixel Fonts in IE9。
我认为这直接导致了 IE9 中字体垂直对齐的问题。不幸的是，似乎没有修复，因为这是强制选项或用户可自定义（不太可能发生）。
所以看起来唯一的解决方案是增加前面提到的 line-height。
【讨论】：
这里有这个问题的答案：
http://www.sitepoint.com/forums/css-53/text-alignment-w-ie9-standards-mode-745359.html
我在文本渲染 1px 时遇到了同样的问题，它只会在 IE9 中以 13px 的字体大小出现。
添加css样式
{
height: 16px;
line-height:16.99px;
}
到周围的 div 为我在 IE7-9、FF 和 Windows 上的 Chrome 上解决了问题。
【讨论】：
您可能希望查看以下内容：
CSS: Standard (dynamic) way to centralize an element in the y-axis
有一些有用的参考资料可能仍然适用于 IE9。
根据您的代码：您在多个位置设置行高。尝试删除内部 div 中的 line-height:16px 属性，实际上，去掉内部 div，因为垂直对齐只会影响内联元素。
此外，请确保您的容器高度足以容纳文本 (1.2*13)，否则您可能会遇到与不同字体或不同浏览器默认字体大小相关的问题。
可能发生的情况是 1.2*13 = 15.6，并且取决于浏览器如何四舍五入浮点数，这可能会导致 1 个像素的偏移。将 line-height 设置为 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，让line-height控制容器的高度。
【讨论】：