在Chrome和Firefox中出现不同的输入框外观

Question

我已经在Chrome中测试过了，显示正常，但是在Firefox中，输入框比预期的要大。

以下是标记：

I've tested in Chrome, it shows fine but when in Firefox, the input box is larger than expected.

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

这是样式：

.form-wrapper {
     height: 80px;
     clear: both;
}

.form-wrapper input {
     border-radius: 10px;
     border: 5px solid #E5E4E2;
     margin: 2px;
     height: 40px;
     vertical-align: middle;
     padding: 20px;
     margin-top: 15px;
     width: 85%;
}

.form-wrapper button {
     overflow: visible;
     position: absolute;
     float: right;
     border: 0;
     padding: 0;
     height: 40px;
     width: 110px;
     border-radius: 0 3px 3px 0;
     margin: 20px -118px;
}

这是一个在fiddle上的示例。

从这个示例中，你可以看到在Chrome和Firefox中它们显示的大小不同。

当我查看这个问题时，我发现.form-wrapper input{ }中的padding:20px导致了这个问题。然而，当我删除它时，Firefox可以正常显示，但Chrome中输入区域变小了。想知道是否有任何方法可以使它在两个浏览器中显示相同。

- JavaScripter

---

对于任何因其他原因而遇到类似问题的人，解决方案在这里：https://dev59.com/ClgQ5IYBdhLWcg3wGgFY#43361500 - Vic Seedoubleyew

Answer 1

Firefox和Chrome在处理type="search"输入框时，使用的box-sizing属性不同，Firefox使用content-box，而Chrome使用border-box。

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

http://jsfiddle.net/J8dSN/12/

- Adrift

---

嗨，这个修复了问题，但是似乎输入框仍然停留在原始位置，现在无法看到我们输入的内容。如何更改呢？请参见http://jsfiddle.net/J8dSN/13/。 - JavaScripter

你可以将 .form-wrapper input 的填充减少到 10px，并将其高度增加到 50px。示例：http://jsfiddle.net/J8dSN/15/ - Adrift

Answer 2

我认为这可能会回答你的问题：Firefox和Opera/Chrome/IE中表单填充差异

不同的浏览器从不同的起点处理像填充和边框之类的属性。

- Shylo Hana