`contenteditable = true` Höhe Ausgabe in FireFox

Question

Wenn es wird eine leere div mit contenteditable="true":

CSS:

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

HTML:

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

In IE und Chrome, es zeigt, die Höhe wie ein normales Eingabefeld mit kleiner Polsterung. In Firefox zeigt es nur, dass 3px Padding ich in den Stilen hinzugefügt habe. Wobei, es kollabiert und ist nur so groß wie die Grenze.

Wissen Sie, ob das ein Firefox-Bug ist? Können Sie einen Weg vorschlagen, damit umzugehen?

Answer 1

Umgehung:

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

CSS2 section 10.6.3:

das Höhe des Elements ist der Abstand von seinem oberen Inhaltskante zum ersten anwendbaren der folgenden:

1. die Unterkante das Feld für die letzte Zeile, wenn das Feld einen Inline-Formatierungskontext mit einer oder mehreren Zeilen
einrichtet
2. der untere Rand des unteren (möglicherweise kollabierten) Rands des letzten untergeordneten untergeordneten Elements, wenn der untere Rand des Elements nicht mit dem unteren Rand des Elements kollabiert
3. der untere Rand des letzten Inflow-Kindes, dessen Spitze Marge nicht kollabiert mit dem unteren Rand des Elements
4. Null, sonst

Für diesen leeren div,

1 bis 3 sind nicht anwendbar, da die div leer. Es hat keine Linienboxen oder Kinder. Punkt 4 gilt daher.

Die Problemumgehung erzwingt mindestens ein Zeilenfeld innerhalb des div, so dass es eine Höhe ungleich Null erhält.

Answer 2

Dies funktioniert für mich ganz gut in firefox

http://jsfiddle.net/D6D6A/

html:

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

css: zu schwarzen Rand geändert, so leichter

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

Mitteilung zu sehen wenn Sie Paddin wechseln g bis 0 px, hat keine Höhe. Mit dem 3px-Padding funktioniert es jedoch wie es sollte.