`contenteditable problem = wysokość TRUE w FireFox

Question

Gdy jest pusty div z contenteditable="true":

CSS:

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

HTML:

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

W IE i Chrome, to pokazuje wysokość jak normalne pole wejściowe z niewielką wyściółką. W przeglądarce Firefox pokazuje tylko, że dopełnienie 3px dodałem w stylach. W/o to, zapada się i jest tylko tak wysoka jak granica.

Czy wiesz, że jest to błąd przeglądarki Firefox? Czy możesz zaproponować sposób, aby sobie z tym poradzić?

Answer 1

obejście:

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

CSS2 section 10.6.3:

wysokość elementu jest odległość od jego górnej krawędzi treści do pierwszego stosowane z następujących:

1. dolna krawędź w ostatnim polu liniowym, jeśli ramka ustanawia kontekst formatowania liniowego z jedną lub większą liczbą linii
2. dolną krawędź dolnego (ewentualnie zwiniętego) marginesu ostatniego potomka, jeśli dolny margines dziecka nie zapada się z dolnym marginesem elementu
3. dolny brzeg ostatniego dziecka w trakcie przepływu, którego wierzchołek margines nie zwinąć z dolnego marginesu tego elementu
4. zera, inaczej

Dla tej pustej div,

1 do 3 nie mają zastosowania, ponieważ div jest pusty. Nie ma pól liniowych ani dzieci. Zastosowanie ma punkt 4.

Obejście wymusza co najmniej jedno pole liniowe wewnątrz elementu div, aby uzyskać niezerową wysokość.

Answer 2

Działa to dobrze dla mnie w firefox

http://jsfiddle.net/D6D6A/

html:

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

css: zmieniona na czarną obwódką więc łatwiej zobaczyć

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

zawiadomienie jeśli zmienisz paddin g do 0px, nie ma wysokości. Jednak przy dopełnieniu 3px działa tak, jak powinien.