css - Firefox 中带有文本区域的列表元素顶部的边距/填充

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

当列表呈现时，第一个元素显示有一个小的额外顶部边距，导致内部的文本区域溢出列表，如下所示:

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/

---

这种情况下的问题是，对于 textarea 元素，Firefox 默认为 vertical-align: text-bottom，而 Chrome 默认为 vertical-align: baseline 。