为什么输入字段在Chrome中无法正常显示？

Question

我有一个在localhost上运行的网站，我在2-3个月前开发了它。那时，搜索框在Firefox和Chrome中都按预期工作。但现在突然它在Chrome中显示不正确，而在Firefox中它可以正常工作。

以下是Chrome中的显示效果（不正确）：

以下是它在Firefox中的外观（正确）：

这就是问题，Firefox正确显示输入框，但Chrome已将其搞砸了。它之前有效，但现在不起作用。

点击（Chrome）上的搜索框：

点击（Firefox）上的搜索框：

唯一搞砸的是搜索框，搜索图标和关闭图标正确显示。自从过去的2-3个月以来，我没有更改代码中的单个字符。它过去曾经工作过，但现在神秘不起作用。

以下是搜索框和图标的代码：

<input id="search" name="q" type="search" required>
<label for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>

此外，Chrome是唯一显示错误的浏览器，我在Maxthon Nitro中测试过，结果与Firefox相同。

对我而言，谷歌似乎已经通过更新改变了Chrome中的内容。有什么方法可以使用样式正确显示它吗？

Answer 1

看起来你正在使用materialize.css。如果是这样，请将其添加到您的CSS中，它就可以了：

input[type="search"] {
    height: 64px !important; /* or height of nav */
}