Firefox / IE - ошибка в определении размера текстовой области - обходные пути?
Попробуйте этот код в 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>
Я заметил, что это происходит и для входных данных. Они не реагируют как обычные блочные элементы на размеры, подразумеваемые сверху / снизу и слева / справа.
Мой обходной путь - поместить границы и отступы на контейнер и установить позицию textarea на относительное, а width / height - на 100%. Но это не идеально, потому что полосы прокрутки текстовой области находятся внутри отступа, что недопустимо (для меня) с точки зрения пользовательского интерфейса.
Есть что-то, что я пропускаю Как я могу заставить верхний / правый / нижний / левый работать для текстовых полей в FF / IE?