1

我在下面的文本区域上方有一个额外的空间，但仅限于 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修复它？

4

1 回答 1

5

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

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

  • 更改vertical-align: text-top为vertical-align: top.

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

我不确定为什么在文档类型text-top的顶部添加额外的空间。Transitional

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

<!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">
于 2011-04-09T12:33:15.917 回答