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 版可以正常显示页面。

4

1 回答 1

1

将文本包装在 a 中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 中将跨度移动到中间以下。

此外，内联样式不受欢迎，但我假设您正在使用它们来总结您的观点。

于 2013-06-05T17:19:39.943 回答