Вот пример в 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. Просто интересно, любой способ сделать его отображаемым одинаковым в обоих браузерах.
Привет, это проблема будет устранена, однако, кажется, что входные данные все еще находятся в исходном положении, не могут видеть, что мы вводим сейчас. Как его изменить? см. http://jsfiddle.net/J8dSN/13/ – JavaScripter
Вы можете уменьшить заполнение на вкладке '.form-wrapper 'до 10px и увеличить его до 50px. Пример: http://jsfiddle.net/J8dSN/15/ – Adrift