输入字段Chrome和Firefox显示不同 [英] Input Field Chrome and Firefox shows different

问题描述

以下是小提示中的示例

在Chrome中测试，它显示正常，但在Firefox中，输入框大于预期。

I've tested in Chrome, it shows fine but when in Firefox, the input box is larger than expected.

这是什么原因？解决此问题的任何解决方案？

what is the reason for this? any solution to fix this problem?

这里是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中，不同大小。

As you can see from the example, when in Chrome and FF, they shows different size.

当我检查这个问题，我发现padding：20px in .form-wrapper input {}引起了这个问题。但是，当我删除它，FF显示很好，但输入区域变得更小在Chrome。

When I check this issue, I found the padding:20px in .form-wrapper input{ } has caused this problem. However, when I delete it, FF 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：content-box 在 type =search输入，而Chrome使用 。

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屋！