Firefox / IE - ошибка в определении размера текстовой области - обходные пути? - PullRequest
Новая
       12

Firefox / IE - ошибка в определении размера текстовой области - обходные пути?

0 голосов
/ 25 мая 2010

Попробуйте этот код в Chrome, Firefox и IE: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Textarea problem</title>
<style type="text/css">
html, body {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border: 0; padding: 0; margin: 0;
}

#container {
  position: absolute;
  top: 4px;bottom: 4px;
  right: 4px;left: 4px;
  background-color: grey;
}

#ta {
  position: absolute;
  bottom: 0; right: 0;
  top: 0; left: 0;
  /*width: 100%; height: 100%;*/
  border: black 4px solid; padding: 0; margin: 0;
  background-color: orange;
  padding: 8px;
}
</style></head>
<body>

<div id="container">
    <textarea id="ta" >This textarea should fill the window. But FF and IE leave the dimensions at the defaults! This happens when the corner offsets are specified; not when width and height are specified. But 100% width and height do not play with the box model when using padding and borders. </textarea>
</div>

</body>
</html>

Я заметил, что это происходит и для входных данных. Они не реагируют как обычные блочные элементы на размеры, подразумеваемые сверху / снизу и слева / справа.

Мой обходной путь - установить границы и отступы на контейнере и установить положение текстовой области на относительное, а ширину / высоту на 100%. Но это не идеально, потому что полосы прокрутки текстовой области находятся внутри отступа, что недопустимо (для меня) с точки зрения пользовательского интерфейса.

Есть что-то, чего мне не хватает? Как я могу заставить верхний / правый / нижний / левый работать для текстовых полей в FF / IE?

1 Ответ

1 голос
/ 25 мая 2010

В каких версиях IE он должен работать?

Если вы измените положение #ta на relative и установите его ширину и высоту 100%, вы можете добавить 

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

, чтобы заставить его работать в IE8 +, Firefox 3.0+, а также в Safari и Opera.

Свойства top / right / bottom / left больше не нужны.

...