Firefox / IE textarea dimensionamiento peculiaridad - soluciones?

Question

May 25, 2010, 05:27 PM

Firefox / IE textarea dimensionamiento peculiaridad - soluciones?

Pruebe este código en Chrome, Firefox e 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>

Noto que esto también sucede con las entradas. No responden como elementos de bloque ordinarios a las dimensiones implicadas por arriba / abajo e izquierda / derecha.

Mi solución es colocar el borde y el relleno en el contenedor y establecer la posición del área de texto en relativa y el ancho / alto al 100%. Pero no es perfecto, porque las barras de desplazamiento del área de texto están entonces dentro del relleno, lo cual es inaceptable (para mí) desde la perspectiva de la interfaz de usuario.

¿Hay algo que este olvidando? ¿Cómo puedo hacer que la parte superior / derecha / inferior / izquierda funcione para áreas de texto en FF / IE?