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なんらかの理由 (なぜ? ) でどうしても必要でない限り、これは簡単な解決策です。

doctypetext-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 に答える