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)，您会清楚地看到问题所在。具有属性input的{{1}}元素通常应与display:table-cell元素一样出现在同一行。你会注意到inline这是真的。但是，如果type="submit"，则type="image"元素充当input级别元素，显示在新行上。

问题的根源在于属性block。如果您将-webkit-appearance应用于-webkit-appearance:none个元素，您会发现它们现在都是相同的！ (example)

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

问题已解决，(example)。

-webkit-appearance:none

这是一个更新的example，修复了您的初始问题。

我还向input[type="image"] { -webkit-appearance:push-button; }添加了src，因为这是input[type="image"]的目的。

同样，所有这些都适用于type="image"浏览器，如果您使用的是IE，FF或Opera，这些示例都不会对您有任何意义，因为它们无法证明此问题。

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

1 个答案: