Почему поле ввода неправильно отображается в Chrome?

Question

У меня есть сайт, работающий на localhost, я разработал его около 2-3 месяцев назад. Тогда окно поиска работало так, как ожидалось, в Firefox и Chrome. Но теперь он неожиданно отображается неправильно в Chrome, тогда как в Firefox он работает.

Вот как это выглядит в Chrome (неправильному):

А вот как это выглядит в Firefox (правильный):

Это проблема, Firefox правильно показывает окно ввода, но Chrome испортил его. Он работал раньше, но не работает.

окно Поиск по щелчку (Chrome):

окно Поиск по щелчку (Firefox):

Единственный, который испортил это окно поиска, значок поиска и значок закрытия отображается правильно. За последние 2-3 месяца я не изменил ни одного символа в коде. Раньше это работало, но таинственно не работает.

Вот код в поле поиска и иконки:

<input id="search" name="q" type="search" required> 
<label for="search"><i class="material-icons">search</i></label> 
<i class="material-icons">close</i> 

Кроме того, Chrome является единственным браузером, который показывает его неправильно, я проверил его в Maxthon Nitro и результаты такие же, как Firefox ,

Мне кажется, что Google изменил что-то в Chrome с обновлением. Есть ли способ заставить его правильно отображать стили?

Answer 1

Похоже, вы используете materialize.css. Если да, то добавьте в ваш CSS и это будет хорошо:

input[type="search"] { 
    height: 64px !important; /* or height of nav */ 
}