Firefoxの中で、リスト要素の上にあるテキストエリアの余白/パディングを

Question

Firefoxで奇数の余白/余白を持っています。

<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; 
} 

、最初の要素は内部のテキストエリアがオーバーフローを引き起こす小さな余分トップマージンで表示され、このHTMLを考えると

ここに見られるように、リスト：

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

Chromeでこの問題は発生しません。誰も説明とそれを取り除く方法を持っていますか？

Answer 1

ul li textareaにdisplay: blockを追加します。

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

または、vertical-align: topを追加します。

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

---

この場合の問題点は、textarea要素のためのvertical-align: text-bottomへのFirefoxのデフォルトです、 Chrome de障害はvertical-align: baselineにあります。

Answer 2

あなたが異なる アプローチ