图像 <input> 和表格单元格显示

Question

我有一个<input> 和一个<input type="image">，显示为table-cell。
我不明白为什么图像在 WebKit 驱动的浏览器中换行。

这是我的 HTML：

<div id="search">
    <div id="search_input_wrapper">
        <input type="text" name="Search" id="search_input" />
        <input type="image" name="Submit" id="search_submit" alt="Search" />
    </div>
</div>

这是我的 CSS：

div#search {
    display:table;
    width:100%;
    table-layout:fixed;
}
div#search_input_wrapper {
    display:table-row;
}
input {
    display:table-cell;
    margin:0;
    padding:0;
    border:0;
}

这是jsFiddle

Answer 1

这是一个有趣的问题，只与-webkit 浏览器有关。

如果你看看这个(example)，你就会清楚地看到问题所在。具有display:table-cell 属性的input 元素通常应该出现在同一行，就像inline 元素一样。如果type="submit"，您会注意到这是真的。但是，如果是type="image"，则input 元素充当block 级别元素，出现在新行上。

问题的根源在于属性-webkit-appearance。如果您将-webkit-appearance:none 应用于两个input 元素，您会注意到它们现在的行为相同！ (example)

带有type="submit" 的input 元素的默认属性是-webkit-appearance:push-button，因此我们可以通过将相同的属性应用于type="image" 元素来解决问题，因为它们通常默认具有-webkit-appearance:none 属性。

问题已解决，(example)。

input[type="image"] {
    -webkit-appearance:push-button;
}

这是一个更新的example，解决了您最初的问题。

我还在input[type="image"] 中添加了src，因为这就是type="image" 的用途。

同样，所有这些都与-webkit 浏览器有关，如果您使用的是 IE、FF 或 Opera，这些示例对您都没有任何意义，因为它们没有说明问题。