área de texto con un ancho de 100% ignora el ancho del elemento padre en IE7

Question

Tengo el siguiente área de texto en una tabla:

<table width="300"><tr><td> 

<textarea style="width:100%"> 
longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring 
</textarea> 

</td></tr></table> 

Con una larga cadena en el área de texto, el área de texto se estira para acomodar en una línea en Internet Explorer 7 , pero conserva su ancho de 300 px en otros navegadores.

¿Alguna idea sobre cómo solucionar esto en IE?

Answer 1

¿trató ...

overflow: hidden;

??

no estoy seguro de si debería estar en la tabla del área de texto ... experimentar un poco

Answer 2

o, ¿qué tal:

overflow: scroll; 

Editar:

que realmente probado esta. Creo que el comportamiento es tal porque el ancho está sobre la mesa, lo cual creo (no tengo nada que respalde esto) Leí hace mucho tiempo que el ancho de la tabla es , el ancho sugerido es, pero puede ampliarse para acomodar su contenido. No es seguro. Sé que si usa un <DIV> en lugar de una tabla, funciona. Además, si aplica el ancho de 300 píxeles al elemento que contiene <TD> en oposición al elemento <TABLE>, también funciona. ¡Además, el overflow: scroll no hace nada! : P

Buen comportamiento funky IE, seguro!

Answer 3

IE también admite la propiedad word-break CSS 3.

Answer 4

Aplicar el ancho al td, no al table.

EDITAR: @Emmett - el ancho podría aplicarse tan fácilmente a través de CSS.

td { 
    width: 300px; 
} 

produce el resultado deseado. O, si estás usando jQuery, se podría añadir el ancho a través de la escritura:

$('textarea[width=100%]').parent('td').css('width', '300px'); 

El punto es, hay más de una manera de aplicar un ancho de una celda de tabla, si las limitaciones de desarrollo que impiden aplicarlo directamente .

Answer 5

@Peter Meyer, Jim Robert

Probé diferentes valores de desbordamiento, sin ningún resultado.

Experimentar con diferentes valores para el atributo de ajuste y el estilo de ajuste de palabras también no fue fructífero.

EDIT:

@dansays, seanb

Debido a algunas limitaciones específicas de la aplicación incómodas, la anchura sólo se puede aplicar a la mesa.

@travis

estilo de ajuste = "palabra-break: romper todo"; tipo de trabajado! Todavía se envuelve de manera diferente en IE7 y FF. Aceptaré esta respuesta si no sale nada mejor.

Answer 6

Lo mejor que pude encontrar para hacer que funcione, un poco hacky: área de texto
envoltura con <div style="width:300px; overflow:auto;"> podría querer jugar con el valor de desbordamiento

Answer 7

La propiedad de desbordamiento es el camino a seguir. En particular, si desea que se ignore el texto adicional, puede usar "overflow: hidden" como una propiedad css en el texto.

En general, cuando un navegador tiene un objeto irrompible, como una cadena larga sin espacios, puede haber un conflicto entre varias restricciones de tamaño: las de la cadena (larga) frente a su contenedor (corta). Si observa un comportamiento diferente en diferentes navegadores, solo resuelven este conflicto de forma diferente.

Por cierto, hay un buen truco disponible para cadenas largas: la etiqueta <wbr>. Si su navegador ve longstringlongstring, a continuación, se tratar de encajar en el contenedor como una sola cadena, ininterrumpida - pero si no puede caber, se romperá esa cadena por la mitad en el WBR. Básicamente es un punto de ruptura con una solicitud implícita de no romper allí, si es posible (algo así como un guión en los textos impresos). Por cierto, es un poco problemático en algunas versiones de Safari y Opera - echa un vistazo a this quirksmode page para más.

Answer 8

Otra opción poco limpia, si usted está atascado con un gran número de limitaciones, pero sabe lo que la rodea dom se verá así:

style="width:100%;width:expression(this.parentNode.parentNode.parentNode.parentNode.width +'px')" 

no es bonito, pero funciona en IE7.
Usar jquery o similar sería una solución mucho más ordenada, pero depende de las otras limitaciones que tenga.

Answer 9

Me he encontrado con este problema antes. Está relacionado con cómo HTML analiza los anchos de las tablas y celdas.

Está bien configurar 300 como ancho, siempre y cuando el contenido del elemento nunca supere eso (establecer un div con un ancho definido dentro y una regla de desbordamiento es mi forma favorita).

Pero en ausencia de una solución como lo anterior, el minuto cualquier elemento que se abre paso entre esa anchura, todas las apuestas están apagadas. El elemento se vuelve tan ancho como debe para acomodar los contenidos.

punta adicional - embale sus valores de anchura en cualquier conjunto de cotizaciones se anidan correctamente el valor (<table width='300'). Si alguien aparece y lo cambia a%, ignorará el%, de lo contrario.

Por desgracia, siempre va a tener problemas para romper las cadenas que no tienen descansos 'naturales' en el IE, a menos que usted puede hacer algo para separarlos a través de código.

Answer 10

Otra opción hacky, pero la única opción que funciona para mí - ninguna de las otras sugerencias sobre esta página hacer - es envolver la caja de texto en una sola tabla de celda con un diseño de tabla fijo.

<table style="width:100%;table-layout:fixed"><tr><td> 
<textarea style="width:100%">longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring</textarea> 
</td></tr></table> 

Answer 11

Para resolver este problema se utiliza el espacio de su texto, y usted también utilizar el código

overflow:hidden 

Answer 12

Dar el ancho en pixels.this debería funcionar correctamente