列表项中的奇怪填充

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 elmement的默认样式会在基线下方创建一些额外的空白区域。设置display: block似乎解决了Chrome中的问题，并且不会破坏Firefox中的任何内容。

请参阅演示：http://jsfiddle.net/audetwebdesign/jHbC7/

注意： Internet Explorer存在问题，按钮高度可以折叠为0，因此您可能需要添加与背景图像高度相对应的min-height值。 / p>