Problema di altezza `contenteditable = true` in FireFox

Quando c’è un div vuoto con contenteditable="true" :

CSS:

 [contenteditable="true"] { border: 1px dashed #dedede; padding: 3px; } 

HTML:

 

In IE e Chrome, mostra l’altezza come un normale campo di input con una piccola spaziatura. In Firefox, mostra solo il padding 3px che ho aggiunto negli stili. Senza contare che crolla ed è alto solo come il confine.

Sai se questo è un bug di Firefox? Puoi suggerire un modo per gestirlo?

soluzione alternativa:

 [contenteditable='true']:before { content: "\feff "; } 

CSS2 sezione 10.6.3 :

L’altezza dell’elemento è la distanza dal suo bordo superiore del contenuto al primo applicabile del seguente:

  1. il bordo inferiore dell’ultima casella di riga, se la casella stabilisce un contesto di formattazione in linea con una o più righe
  2. il margine inferiore del margine inferiore (possibilmente crollato) dell’ultimo figlio in stream, se il margine inferiore del bambino non collassa con il margine inferiore dell’elemento
  3. il bordo del bordo inferiore dell’ultimo bambino in stream il cui margine superiore non collassa con il margine inferiore dell’elemento
  4. zero, altrimenti

Per questo div vuoto,

Da 1 a 3 non sono applicabili, poiché il div è vuoto. Non ha box di linea o bambini. Si applica pertanto l’articolo 4.

La soluzione alternativa impone almeno una casella di riga all’interno del div, in modo che diventi altezza diversa da zero.

Questo funziona bene per me in Firefox

http://jsfiddle.net/D6D6A/

html:

 

css: cambiato in bordo nero così facile da vedere

 [contenteditable='true'] { border: 1px dashed #000; padding: 3px; } 

nota che se cambi padding a 0px, non ha altezza. Tuttavia, con il padding 3px, funziona come dovrebbe.