输入字段在Chrome和Firefox中显示不同 [英] Input Field appearing different in Chrome and Firefox

问题描述

我已经在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;
}

这里是小提琴。

从示例中可以看出，在Chrome和Firefox中，它们

As you can see from the example, when in Chrome and Firefox, they show in different sizes.

当我检查此问题时，我发现<$ c $中的 padding：20px c> .form-wrapper输入{} 导致了此问题。但是，当我删除它时，Firefox可以正常显示，但是Chrome中的输入区域变小了。只是想知道，任何使它在两个浏览器中都显示相同的方法。

When I check this issue, I found the padding:20px in .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.

推荐答案

有所不同，因为Firefox使用 box-sizing：在 type = search 输入上的内容框，而Chrome浏览器使用 border-box 。

There is a difference because Firefox uses box-sizing: content-box on type="search" inputs, while Chrome uses border-box.

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

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

这篇关于输入字段在Chrome和Firefox中显示不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！