输入字段在 Chrome 和 Firefox 中显示不同答案

【问题标题】：Input Field appearing different in Chrome and Firefox输入字段在 Chrome 和 Firefox 中显示不同
【发布时间】：2013-09-06 02:48:18
【问题描述】：

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

这里是标记：

<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 中的输入区域变小了。只是想知道，有什么方法可以让它在两个浏览器中显示相同。

【问题讨论】：

对于因其他原因遇到类似问题的任何人，解决方案在这里：stackoverflow.com/a/43361500/2873507

标签： html css

【解决方案1】：

存在差异，因为 Firefox 在 type="search" 输入上使用 box-sizing: content-box，而 Chrome 使用 border-box。

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

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

【讨论】：

嗨，这解决了问题，但是，输入似乎仍然在原来的位置，看不到我们现在输入的内容。如何改变它？见jsfiddle.net/J8dSN/13
您可以将.form-wrapper input 的内边距减少到 10 像素，并将其高度增加到 50 像素。示例：jsfiddle.net/J8dSN/15

【解决方案2】：

我想这可能会回答你的问题：Form padding differences in Firefox and Opera/Chrome/IE

不同的浏览器从不同的起点处理诸如填充和边框等属性

【讨论】：