Question

我在下面的textarea上面有一个额外的空间，但仅限于ie。如何解决？

<div class="field">
    <label>Info</label><textarea cols="40" rows="4"></textarea>
</div>


.field {
     margin: 0px;
     margin-top: 2px;
}

label {
     display: inline-block;
     width: 5em;
     margin-right: 0.5em;
}

textarea {
     display: inline-block;
     width: 22em;
     vertical-align: text-top;
}

如果我在label和textarea标签之间放置一个空格，则空格会消失。但后来我在他们之间得到了一个水平的额外空间。

编辑：我发现，问题出现在doctype - transitional。严格的任务是可以的。有没有办法，用transtional修复它？

Answer 1

我可以重现您的问题。有关详细信息，请参阅我的答案的结尾。

您可以通过以下方式消除差距：

将vertical-align: text-top更改为vertical-align: top。

除非你出于某种原因迫切需要text-top（为什么？），否则这是一个简单的补救措施。

我不确定为什么text-top会在Transitional doctype的顶部添加额外的空格。

使用此代码（XHTML 1.0 Transitional）在IE8中进行测试，您所描述的问题会发生：

<!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>Untitled Document</title>
<style type="text/css">
.field {
     margin: 0px;
     margin-top: 2px;
     background: #ccc
}

label {
     display: inline-block;
     width: 5em;
     margin-right: 0.5em;
}

textarea {
     display: inline-block;
     width: 22em;
     vertical-align: text-top;
}
</style>
</head>

<body>

<div class="field">
    <label>Info</label><textarea cols="40" rows="4"></textarea>
</div>

</body>
</html>

如果我将第一行更改为此（XHTML 1.0 Strict），则不会发生：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

内联块/文本顶部上方的IE额外空间（过渡文档类型）

1 个答案: