Acerca del uso de izquierda/arriba/derecha/inferior en absoluto área de texto colocado

Question

He intentado establecer position:absolute y luego left, top, right y bottom a valores fijos en píxeles, pero a menos que también puse width y height no puedo conseguir que funcione correctamente en Firefox 11.

El renderizado se ve bien en Safari/Chrome ... pero, ¿se trata de un error de Firefox o algo que no es estándar? Usar 100% para width y height a veces es una solución, pero no cuando el elemento no cubre completamente el contenedor principal.

Ver http://jsfiddle.net/EjS7v/6/

Esto es Chrome (y el resultado deseado)

Firefox (anchura/altura a 100%)

Firefox (sin anchura/altura)

¿Hay alternativas al uso de Javascript para calcular el ancho y la altura en tiempo de ejecución?

Tenga en cuenta que, en este ejemplo, he utilizado un div como contenedor de tamaño fijo, pero el caso más interesante y útil es cuando el contenedor es elástico.

Answer 1

En realidad, hay una alternativa simple, use marcas de presentación para contener ese área de texto y luego solo el 100% de ancho de altura para el texto mismo.

De hecho, CSS es muy limitado.

Answer 2

Esto se debe a textarea, a diferencia de, digamos, un div, tiene una default width and height:

Si el elemento tiene un atributo cols y analizar el valor del atributo utilizando las reglas para analizar los números enteros no negativos doesn' t genera un error, luego se espera que el agente de usuario use el atributo como una sugerencia de presentación para la propiedad de ancho en el elemento, con el valor del ancho efectivo de área de texto (como se define a continuación). De lo contrario, se espera que el agente de usuario actúe como si tuviera una regla de hoja de estilo de nivel de agente de usuario que establezca la anchura de la propiedad en el elemento para el ancho efectivo del área de texto.

El textarea anchura efectiva de un elemento de textarea es tamaño × avg + SBW, donde tamaño es ancho de carácter del elemento, avg es el ancho de carácter promedio de la fuente primaria de el elemento, en píxeles CSS, y sbw es el ancho de una barra de desplazamiento, en píxeles CSS. (La propiedad de separación de letras del elemento no afecta el resultado).

Si el elemento tiene un atributo rows, y el análisis del valor de ese atributo usando las reglas para analizar enteros no negativos no genera un error, entonces el usuario se espera que el agente use el atributo como una sugerencia de presentación para la propiedad de altura en el elemento, con el valor siendo la altura efectiva del área de texto (como se define a continuación). De lo contrario, se espera que el agente de usuario actúe como si tuviera una regla de hoja de estilo de nivel de agente de usuario que establezca la altura de la propiedad en el elemento a la altura efectiva del área de texto.

El área de texto altura efectiva de un elementotextarea es la altura en píxeles CSS del número de líneas especificado altura de los caracteres del elemento, más la altura de una barra de desplazamiento en píxeles CSS.