Html 在Chrome和Firefox中显示不同的输入字段

我在Chrome上测试过，它显示的很好，但在Firefox中，输入框比预期的要大

以下是标记：

<div class="form-wrapper">           
    <input type="search" name="Ofsearch"
            placeholder="Search here..." value=""/> 
    <button id="searchButton" type="submit">
        Search
    </button>
</div>

下面是中的示例

正如您从示例中看到的，在Chrome和Firefox中，它们以不同的大小显示

---

当我检查这个问题时，我发现

中的
padding:20px
。表单包装器输入{}

导致了这个问题。然而，当我删除它时，Firefox显示良好，但是Chrome的输入区域变小了。我只是想知道，有什么方法可以使它在两种浏览器中显示相同。

这是不同的，因为Firefox在

type=“search”

输入中使用

框大小：content box

，而Chrome使用

边框框

.form-wrapper input {
    box-sizing: border-box;
}

我想这可能会回答你的问题：

不同的浏览器从不同的起点处理诸如填充和边框之类的属性
Hi，这解决了问题，但是，似乎输入仍处于原始位置，无法看到我们现在输入的内容。如何改变它？请参见，您可以将
.form wrapper input
上的填充减少到10px，并将其高度增加到50px。示例：对于因其他原因出现类似问题的任何人，解决方案如下：
.form-wrapper input {
    box-sizing: border-box;
}