2013-09-03 6 views
12

Вот пример в fiddleПоле ввода Chrome и Firefox показывает различные

Я проверил в 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, они показывают различный размер.

Когда я проверяю эту проблему, я обнаружил, что заполнение: 20px в .form-wrapper input {} вызвало эту проблему. Однако, когда я удаляю его, FF отлично выглядит, но область ввода становится меньше в Chrome. Просто интересно, любой способ сделать его отображаемым одинаковым в обоих браузерах.

ответ

17

Существует разница, поскольку Firefox использует box-sizing: content-box на входах type="search", в то время как Chrome использует border-box.

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

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

+0

Привет, это проблема будет устранена, однако, кажется, что входные данные все еще находятся в исходном положении, не могут видеть, что мы вводим сейчас. Как его изменить? см. http://jsfiddle.net/J8dSN/13/ – JavaScripter

+0

Вы можете уменьшить заполнение на вкладке '.form-wrapper 'до 10px и увеличить его до 50px. Пример: http://jsfiddle.net/J8dSN/15/ – Adrift

0

Я думаю, что это, вероятно, ответ на ваш вопрос: Form padding differences in Firefox and Opera/Chrome/IE

Различные браузеры обрабатывать атрибуты, такие как обивка и границы из разных отправных точек

Смежные вопросы