Pole tekstowe Chrome i Firefox pokazuje inny

Question

Oto przykład w fiddle

Przetestowałem w Chrome, pokazuje w porządku, ale gdy w Firefox, okno wejściowe jest większe niż oczekiwano.

Jaki jest tego powód? jakieś rozwiązanie, aby rozwiązać ten problem?

Oto plik 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; 
} 

Jak widać z przykładu, gdy w Chrome i FF, to pokazuje inny rozmiar.

Po sprawdzeniu tego problemu znalazłem dopełnienie: 20px w .form-wrapper input {} spowodowało ten problem. Jednak po usunięciu FF pokazuje się dobrze, ale obszar wprowadzania danych jest mniejszy w Chrome. Zastanawiam się, w jaki sposób można wyświetlać to samo w obu przeglądarkach.

Answer 1

Jest różnica, ponieważ Firefox używa box-sizing: content-box na wejściach type="search", a Chrome używa border-box.

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

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

Answer 2

myślę, że to będzie prawdopodobnie zawierał odpowiedź na pytanie: Form padding differences in Firefox and Opera/Chrome/IE

Różne przeglądarki obsługiwać atrybuty jak padding i granice z różnych punktów startowych