Html 输入字段在 Chrome 和 Firefox 中显示不同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18582606/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Input Field appearing different in Chrome and Firefox
提问by JavaScripter
I've tested in Chrome, it shows fine but when in Firefox, the input box is larger than expected.
我在 Chrome 中测试过，它显示正常，但是在 Firefox 中时，输入框比预期的要大。
Here is the markup:
这是标记：
<div class="form-wrapper">
<input type="search" name="Ofsearch"
placeholder="Search here..." value=""/>
<button id="searchButton" type="submit">
Search
</button>
</div>
Here is the style:
这是样式：
.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;
}
Here is the example in fiddle.
这是fiddle 中的示例。
As you can see from the example, when in Chrome and Firefox, they show in different sizes.
从示例中可以看出，在 Chrome 和 Firefox 中，它们以不同的大小显示。
When I check this issue, I found the padding:20pxin .form-wrapper input{ }has caused this problem. However, when I delete it, Firefox shows fine, but the input area gets smaller in Chrome. Just wondering, any way to make it displayed the same in both browsers.
当我检查这个问题时，我发现padding:20pxin.form-wrapper input{ }导致了这个问题。但是，当我删除它时，Firefox 显示正常，但 Chrome 中的输入区域变小。只是想知道，有什么方法可以让它在两个浏览器中显示相同。
回答by adrift
There is a difference because Firefox uses box-sizing: content-boxon type="search"inputs, while Chrome uses border-box.
是有区别的，因为Firefox使用box-sizing: content-box上type="search"的投入，而Chrome使用border-box。
.form-wrapper input {
box-sizing: border-box;
}
回答by Shylo Hana
I think this will probably answer your question: Form padding differences in Firefox and Opera/Chrome/IE
我认为这可能会回答您的问题：Firefox 和 Opera/Chrome/IE 中的表单填充差异
Different browsers handle attributes like padding and borders from different starting points
不同的浏览器从不同的起点处理填充和边框等属性
