`contenteditable problema = altezza true` in FireFox

Question

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

CSS:

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

HTML:

<div contenteditable="true"> 
    <!-- blank by default --> 
</div> 

In IE e Chrome, mostra l'altezza è come un normale campo di input con una piccola imbottitura. 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?

Answer 1

soluzione:

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

CSS2 section 10.6.3:

altezza del elemento è la distanza dal suo bordo contenuto superiore al primo applicabile dei seguenti:

1. il bordo inferiore l'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) del suo ultimo figlio in flusso, se il margine inferiore del bambino non collassa con il margine inferiore dell'elemento
3. il bordo inferiore dell'ultimo bambino in flusso il cui vertice margine non collassa con il margine inferiore dell'elemento
4. zero, altrimenti

Per questo div vuoto,

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 temporanea impone almeno una casella di riga all'interno del div, in modo che diventi altezza diversa da zero.

Answer 2

Questo funziona bene per me in Firefox

http://jsfiddle.net/D6D6A/

html:

<div contenteditable='true'></div> 

css: cambiato a bordo nero in modo più facile vedere

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

preavviso se cambi paddin g a 0px, non ha altezza. Tuttavia, con il padding 3px, funziona come dovrebbe.