css - 图像 <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，这些示例对您来说都没有任何意义，因为它们没有演示问题。