列表項中的奇怪填充

Question

我在列表項中有一個按鈕。 該按鈕應填滿li的整個大小，但是會出現一些奇怪的填充，我不知道如何刪除它：

我相關的CSS部分：

input {
    background:url(ic_action_back.png);
    background-color: white;
    background-repeat: no-repeat;
    background-size: contain;
    background-position:center; 
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

#nav {
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
}

#nav li {
    display: table-cell;
    padding: 0;
    width: 25%;  /* (100 / numItems)% */
    text-align: center;
    border-right: 1px solid #fff;
    white-space: nowrap;
}​

HTML：

    <ul id="nav">
        <li><input type="button" id="start"></li>
        <li><input type="button" id="start"></li>
        <li><input type="button" id="start"></li>
        <li><input type="button" id="start"></li>
    </ul>

JSFIDDLE重現錯誤，底部填充：

http://jsfiddle.net/4LVYj/4/

注意：問題出現在Chrome中，而不出現在Firefox中。

Answer 1

默認情況下，表格將垂直對齊中間應用於表格單元格。

嘗試將以下規則添加到CSS：

#nav li {
   vertical-align: top;
}
input {
   display: block;
}

由於某些原因，Chrome input元素的默認樣式會在基線下方創建一些額外的空白。 設置display: block似乎可以解決Chrome中的問題，並且不會破壞Firefox中的任何內容。

參見演示： http : //jsfiddle.net/audetwebdesign/jHbC7/

注意： Internet Explorer出現問題，按鈕的高度可能折疊為0，因此您可能需要添加與背景圖像的高度相對應的min-height值。