2011-03-01 3 views
2

Firefoxで奇数の余白/余白を持っています。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でこの問題は発生しません。誰も説明とそれを取り除く方法を持っていますか?

答えて

3

ul li textareadisplay: 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にあります。

+0

信じられないほどの突風たい場合は、すべてのようにline-height:1;を追加することができます。ありがとうございました! :) – asgerhallas

+0

これはまた、Chromeの 'li'内の予期しない&不要な空白_below_' textarea'を削除するのにも役立ちました。 –

0

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

関連する問題