javascript - 尽管 CSS 相同，但 Firefox 中的搜索框更高

Question

我刚刚在 Firefox 中发现了一个问题，其中类型为 search 的输入元素在相同的 css 样式下显示不同。这是代码。

<input style="height:29px;" type="search">
<input style="height:29px;" type="submit" value="search">

在 Chrome、Safari 和 Opera 等 Webkit 浏览器上没有问题，但在最新版本的 Firefox 上它的行为有所不同。搜索框更高。如何使用 CSS 或 JavaScript 解决此问题？

Answer 1

您可以尝试将以下元素添加到 CSS 中吗？

CSS

input::-moz-focus-inner {
    height:29px;
    border: 0; 
    padding: 0; 
    margin-top:-2px; 
    margin-bottom: -2px;
}

HTML

<input type="search">
<input type="submit" value="search">

jsfiddle:<a href="http://jsfiddle.net/w2mmX/1/" rel="noreferrer noopener nofollow">http://jsfiddle.net/w2mmX/1/</a>

应该可以解决这个问题。