输入字段Chrome和Firefox显示不同

Question

这是小提琴中的例子

我在Chrome中进行了测试,它显示正常,但在Firefox中,输入框大于预期.

这是什么原因？任何解决方案来解决这个问题？

这是html文件:

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

CSS:

.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和FF中,它们显示的大小不同.

当我检查这个问题时,我发现填充:.form-wrapper input {}中的20px导致了这个问题.但是,当我删除它时,FF显示正常,但Chrome中的输入区域变小.只是想知道,任何方式使它在两个浏览器中显示相同.

Answer 1

是有区别的,因为Firefox使用box-sizing: content-box上type="search"的投入,而Chrome使用border-box.

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

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