在Firefox中使用textarea的列表元素頂部的邊/填充

Question

我在Firefox中有一個奇怪的頂部填充/邊距。

鑑於此HTML：

<ul> 
    <li><textarea>item 1</textarea></li> 
    <li><textarea>item 2</textarea></li> 
    <li><textarea>item 3</textarea></li> 
    <li><textarea>item 4</textarea></li> 
</ul> 

而這個CSS：

ul 
{ 
    margin:0; 
    padding:0; 
    list-style:none; 
    border:1px solid black; 
    width:300px; 
} 

ul li 
{ 
    margin:0; 
    padding:0; 
    height:17px; 
} 

ul li textarea 
{ 
    margin:0; 
    padding:0; 
    border:1px solid black; 
    font-size:11px; 
    height:15px; 
} 

當列表呈現，第一個元素將顯示一個小的額外頂部利潤率造成的textareas內溢出因爲在這裏看到列表：

http://jsfiddle.net/asgerhallas/2fwJZ/

我在Chrome中沒有這個問題。有沒有人有解釋和方法來擺脫它？

Answer 1

添加display: block到ul li textarea：

http://jsfiddle.net/2fwJZ/1/

或者，添加vertical-align: top：

http://jsfiddle.net/2fwJZ/2/

---

在這種情況下的問題是，Firefox的默認爲vertical-align: text-bottom爲textarea元素，而Chrome de故障到vertical-align: baseline。

Answer 2

你都可以這麼加line-height:1;如果你想陣風不同 方法