由于IE 9和10中的分数高度，文本垂直移位问题

Question

由于IE 9和10中的分数高度，文本垂直移位问题

3

请看以下代码：

考虑以下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
</head>
<body>
<p style="font-family: Arial; font-size: 15px">First line</p>
<p style="height: 24px; line-height: 24px; background: green; color: white; font-family: Arial; font-size: 14px">Test</p>
</body>
</html>

在IE 9/10下显示正常:

然而，让我们在第一段添加另一行。

<p style="font-family: Arial; font-size: 15px">First line<br />Second line</p>

之后，“测试”段落相对于其背景发生了偏移：

仔细观察可看出。

我认为这是因为第一段的高度是分数（如IE开发工具所示）：

现在，我的网页有很多这样的文本块，其中一些被移动了，而另一些则没有。自然地，我希望所有块都正常显示，而不是偏移。是否可能强制IE 9/10以这种方式呈现它？

顺便提一下，IE的7和8版本可以完美显示该页面。

- Danylo Mysak

微软表示这种行为是“按设计实现的”：https://connect.microsoft.com/IE/feedback/details/789602/text-vertical-shift-due-to-fractional-heights。 - Danylo Mysak

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MikeM · Accepted Answer

将文本包装在 span 中，并将 vertical-align 设置为 middle。

<p style="font-family: Arial; font-size: 15px">First line<br />Second line</p>
<p style="height: 24px; line-height: 24px; background: green; color: white; font-family: Arial; font-size: 14px">
    <span style="vertical-align:middle">Test</span>
</p>

jsfiddle结果 ( jsfiddle)

这将修复IE 9/10的问题，但会使Chrome/Firefox中的span下移。

此外，内联样式不被推荐使用，但我假设您正在使用它们来概括您的观点。