Маржа / отступ в верхней части элемента списка с текстовой областью внутри в 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/

---

Проблема в этом случае заключается в том, что Firefox по умолчанию vertical-align: text-bottom для textarea элементов, тогда как Chrome по умолчанию vertical-align: baseline.

Answer 2

вы все можете добавить line-height:1;, если вам нужен другой подход