Question

以下是fiddle

中的示例

我在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;
     background: #555;
     color: #FFF;
     clear: both;
     }

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

.form-wrapper input {
background-color: white;
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;
cursor: pointer;
height: 40px;
width: 110px;
color: #FFFFFF;
text-transform: uppercase;
background: #8E8CC2;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
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/

Answer 2

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

不同的浏览器处理来自不同起点的填充和边框等属性

输入字段Chrome和Firefox显示不同

2 个答案: