IE лишнее пространство над встроенным блоком / надписью сверху (переходный тип документа) - PullRequest
Новая
       25

IE лишнее пространство над встроенным блоком / надписью сверху (переходный тип документа)

1 голос
/ 09 апреля 2011

Я получаю дополнительное пространство над текстовой областью ниже, но только в 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;
}

Если я поставлю пробел между метками и тегами textarea, пространство исчезнет.Но затем я получаю горизонтальный лишний пробел между ними.

Редактировать: Я обнаружил, проблема возникает с doctype - transitional.Со строгим вечерингом все в порядке.Есть ли способ, чтобы исправить это с помощью transtional?

1 Ответ

5 голосов
/ 09 апреля 2011

Я могу воспроизвести вашу проблему. Точную информацию смотрите в конце моего ответа.

Вы можете удалить разрыв:

  • Изменение 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">
...