Wie behebe ich inkonsistente Textarea-Unterrand in Firefox und Chrome?

Question

Ich versuche, den zusätzlichen unteren Rand zu eliminieren, den sowohl FF als auch Chrome Textareas zu geben scheinen. Überraschenderweise scheint IE es richtig zu machen. Ich möchte vermeiden, bedingte Includes zu verwenden, aber CSS3-Tweaks sind in Ordnung.

Beispielcode

.red-box { 
 
    background-color: red; 
 
    overflow: hidden; 
 
} 
 
textarea { 
 
    border: solid 1px #ddd; 
 
    margin: 0px; /* Has no effect */ 
 
}

<div class="red-box"> 
 
    <textarea>No Margin Please!</textarea> 
 
</div>

Answer 1

standardmäßig glaube ich, beide Chrome und Firefox, diese Elemente als display: inline-block; gesetzt werden. Stellen Sie display: block in Ihren Stilen und Sie sollten alle eingestellt sein.

Answer 2

Stellen Sie display: block für Ihren Textbereich ein.

Answer 3

deaktivieren Sie einfach die Größe als

TextArea- folgen {Größe ändern: none;}

Answer 4

Wenn Sie es inline verlassen wollen einfach versuchen, können

vertical-align: top