Comportamiento contencioso, extraño de elementos secundarios, y NO espacios en blanco independientes?

He estado jugando con campos contenteditable , y he encontrado un comportamiento extraño que no puedo entender.

Mira el violín para este problema en particular.

Tengo dos divs contenteditable idénticos . Ambos tienen el mismo hijo, seguido de un solo carácter en blanco (de lo contrario, se producen problemas con la zanahoria). La única diferencia entre los dos es que el segundo div ha sido “embellecido”, y se ha hecho más legible al sangrar el en una nueva línea.

 
Something something
Something something

Prueba esto en ambos divs …

  1. Coloque la zanahoria en el extremo derecho del contenido (es decir, después del carácter en blanco)
  2. Luego, haz retroceder un par de veces

Notarás que en la parte superior (primera) div contenteditable , puedes eliminar el elemento , como si fuera un personaje gigante. También debería notar que en el segundo div, ninguna cantidad de retroceso lo borrará. Al menos no en Safari.

Entonces, ¿qué da? Pensé que HTML era independiente del espacio en blanco, ¿por qué la diferencia en el comportamiento de los dos?

Al ver la fuente, tienen marcas ligeramente diferentes …

fuente contenteditable

… pero todavía me corresponde por qué habría alguna diferencia.

Me gustaría que sea eliminable, por lo que la solución es simplemente usar la versión anterior, pero todavía es curioso por qué existe este problema.

¡También! Si eres un gurú contenteditable , he estado luchando con otro problema aquí . ¡Cualquier ayuda en eso es bienvenida!

HTML no es independiente del espacio en blanco; en su lugar, los múltiples caracteres de espacio en blanco se consideran lo mismo que un símbolo de espacio. El problema aquí no es sobre contenteditable , más bien se trata de embellecer los cambios reales DOM aquí. Mira este violín , ilustra el problema. HTML:

 

CSS:

 .left, .right { width: 25%; } .center { width: 50%; } .left, .right, .center { display: inline-block; height: 1em; } .left { background-color: red; } .center { background-color: green; } .right { background-color: blue; } 

Como puede ver, un salto de línea (igual a un espacio) crea algo de espacio entre los bloques, mientras que cuando no hay espacios en blanco, todo funciona “como se esperaba”.

Aún así, tengo que admitir, el comportamiento es bastante extraño: cuando el inspector DOM está abierto, me muestra (en Chrome)

enter image description here

(aquí el carácter de espacio de ancho cero ) y si coloco el cursor hasta el final y presiono retroceder una vez, obtengo elementos DOM idénticos (vale, también intenté eliminar el margen):

enter image description here

Sin embargo, el espacio intermedio no funciona como se esperaba en el segundo caso. La única manera de eliminar el tramo no editable es agregar un carácter después de él, luego mover el cursor antes que él y eliminarlo. Esto puede ser un error, aunque está presente tanto en Safari (como dices) como en Chrome (según mis pruebas).

Creo que esto se discutirá más a fondo con el soporte de los proveedores de navegadores. Por cierto, en FireFox esto se comporta de manera bastante consistente: el span no se puede eliminar en ambos casos, y en el primero no hay nada después de él, mientras que en el segundo hay un espacio después del span (que se puede eliminar, de ‘ curso).