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默认为vertical-align: baseline。

Answer 2

如果你只是想要一个不同的话，你们都可以添加line-height:1; 方法

在Firefox中使用textarea的list-element顶部的边距/填充

2 个答案: