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

I get an extra space above the below textarea, but only in ie. How to fix it?

我在下面的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;
}

If I put a whitespace between label and textarea tags the space disappears. But then I get a horizontal extra space between them.

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

Edit: I found, the problem appears with doctype - transitional. With strict everithing is ok. Is there a way, to fix it with transtional?

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

1 个解决方案

#1

I can reproduce your issue. See the end of my answer for exact details.

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

You can remove the gap by:

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

Changing vertical-align: text-top to vertical-align: top.

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

Unless you desperately need text-top for some reason (why?), this is an easy remedy.

除非你出于某种原因迫切需要文本顶部(为什么?),这是一个简单的补救措施。

I'm not sure why text-top adds the extra space at the top with the Transitional doctype.

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

Testing in IE8, with this code (XHTML 1.0 Transitional), your described issue happens:

在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>

If I change the first line to this (XHTML 1.0 Strict), it doesn't happen:

如果我将第一行更改为此(XHTML 1.0 Strict),则不会发生:

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

#1