Tengo el siguiente código:
DIV { display:inline; border: solid red 1px; } .editable { background:yellow; }
This is test text. This is test text.This is test text.This is test text.This is test text.Thihis is test text.This is test text. short This is test text.This is test text.This is test text.his is test text.Thihis is test text.Thihis is test text.Thihis is test text.Thi
Y necesito IE7 (IE6 no es necesario y FF3.x funciona bien) para envolver el texto correctamente, lo que hace si elimino el contentEditable = “true” de los divs. Solo intente este código con y sin contenido editable y verá lo que quiero decir. Haz que la ventana del navegador sea lo suficientemente pequeña para que veas cómo se ajusta el texto.
Gracias.
DEMO: http://jsbin.com/icavu4
Intenta esto puede ayudar a resolver un poco el problema!
ACTUALIZADO:
Ya que esto se puede considerar en parte como una solución alternativa, le permite mostrarlo como FF pero corta la última parte del texto, ¡es posible que desee proporcionar el texto completo para editarlo al utilizar el hover usando un poco de Javascript!
Oh mi La barra de herramientas del desarrollador de IE revela que contentEditable activa la propiedad de layout infame
Tener un diseño básicamente significa que un elemento es rectangular.
Si bien hay varios hacks que forzan un layout , creo que no hay forma de eliminarlo . 🙁
¿Por qué no usas display: block para los divs?
Incluso podrías usar inline-block si realmente necesitan estar en línea:
http://www.brunildo.org/test/InlineBlockLayout.html Tenga en cuenta que, de acuerdo con quirksmode, el soporte en IE 6 y 7 está incompleto para esto
Exapmles: http://jsfiddle.net/SNzBn/
Respuesta corta: si usa display:inline-block lugar de display:inline , entonces todos los demás navegadores se comportarán como IE.
Detalle: IE9 se comporta de la misma manera. SPAN se comporta igual que DIV {display: inline} , que debería. La respuesta del 1 de septiembre de Pumbaa80 es la mejor. Básicamente, ContentEditable debe ser rectangular en IE. Entonces, tanto SPAN como su DIV se display:inline-block como display:inline-block en display:inline-block en IE. Uso ContentEditable todo el tiempo en un sistema de administración de contenido. Aprovecho la “característica” para que el usuario tenga algo de espacio para trabajar cuando el DIV editable está inicialmente vacío. En su ejemplo, si elimina todo el texto en “corto”, entonces buena suerte al volver a colocar el cursor en el elemento para volver a colocar el texto. Simplemente se colapsa en nada. En el CMS I activa y desactiva la función de edición de contenido, dependiendo de si el usuario ha seleccionado el modo Edición o Vista previa. Al mismo tiempo, alterno la visualización entre inline y block / inline-block, y alterno las guías de edición (su borde rojo) de manera intermitente. … Tom
¿Has probado la propiedad de desbordamiento ?
¿Has intentado usar un SPAN en lugar de un DIV?
Las tags SPAN están en línea, sin la necesidad de mostrarlas: en línea.
Lo siento, no lo intenté, pero no tengo ningún IE7, en este momento.
Querido amigo, todas las versiones de IE tienen algunas desventajas. Especialmente en hojas de estilo de análisis. Para cada versión hay que modificar la regla de estilo. Sugiero, debe utilizar la regla de estilo para cada versión. es decir. Hacks estilo IE. por lo que sé, la versión de IE 6 es la mejor en todas las versiones de IE. Muestra correctamente lo que escribes en hojas de estilo.