2012-10-03 21 views
9

Cuando configuro un relleno en un área de texto, funciona bien en el primer vistazo. Pero cuando escribo contenido que va más allá de la altura del área de texto (cuando empiezas a ver el desplazador), el fondo de relleno deja de existir. ¿Hay alguna manera de arreglar esto? Parece ser un comportamiento predeterminado. Puede ver un ejemplo muy básico aquí: http://jsfiddle.net/corinne/LKkky/ PS. El navegador utilizado es Chrome. PS2. Acabo de probar con Firefox y en realidad el relleno se mantiene.El fondo acolchado para textarea no se considera

+3

Sí, y usted no puede evitarlo. Coloque el área de texto dentro de un div y el estilo de ese div, elimine los bordes de textarea y et voila. –

+1

El relleno todavía está allí, simplemente cae debajo de la parte inferior del área de desplazamiento a medida que escribe. Sería lo mismo si tuviera un div desplazable o incluso el cuerpo si la página tiene barras de desplazamiento. –

+1

Estoy usando Firefox 8.0 y no puedo ver dónde está el problema. No importa cuánto texto escriba, el relleno siempre está ahí. Entonces, tal vez sea específico del navegador que estás usando. – Shadowxvii

Respuesta

3

Chrome, Safari e Internet Explorer representan los saltos de texto de forma diferente a Firefox y Opera. Ahora, ¿cuál de ellos representa incorrectamente las áreas de texto? Eso depende de lo que intentes lograr porque, en verdad, ninguno de ellos lo representa incorrectamente, todos agregan relleno, solo se reduce a cómo interpretaron la especificación.

Ninguna propiedad de CSS solucionará este 'problema' por lo que la única manera de evitar este 'problema' es agregar un elemento contenedor al área de texto y darle un relleno.

1

En realidad, todavía existe; Solo necesita desplazarse hacia abajo para ver los 20 píxeles adicionales de relleno cuando se completa el contenido del cuadro de texto. Puedo sugerir desbordamiento: oculto.

+0

Sí, tienes razón, en realidad. Pero desbordamiento: oculto solo oculta la barra de desplazamiento. Y en realidad, no cambia el problema, todavía tengo que navegar hacia abajo para ver el relleno. – Corinne

+0

Probé en jsfiddle chrome y cuando el contenido se llenó hasta el nivel de relleno y en la siguiente línea, el foco bajó, dejando relleno en la parte inferior, pero cortando la parte superior (no es genial sin una barra de desplazamiento). Creo que el usuario mdk tiene la mejor solución para usted. Gracias por compartir esta pregunta. –

+0

'overflow-x: hidden' funciona para mí y la barra de desplazamiento vertical todavía está disponible – andreymal

1

Puede asignar el estilo font-size: 0; a la etiqueta form porque el problema es que dentro de dicha etiqueta hay una nueva línea en alguna parte, que debe evitar.

Después de hacerlo, debe asignar el tamaño de fuente correcto al componente que tiene el contenido, en el caso más simple, el área de texto.

Cuestiones relacionadas