У меня есть 2 ввода ... текстовое поле и кнопка отправки. Я использую пользовательские фоновые изображения на обоих с помощью CSS. Оба изображения имеют одинаковую высоту 18 пикселей. В Chrome кнопка отображается немного ниже текстового поля. В Firefox это точно.
Я использую CSS:
.search-field {background: url('search-field.png') no-repeat transparent!important; width: 117px!important; height: 18px!important; border: none!important; margin-right: -7px!important; }
.search-button {background: url('search-button.png') no-repeat transparent!important; width: 16px!important; height: 18px!important; border: none!important; text-indent: -9999!important; text-transform: capitalize!important;}
HTML-код, который я использую:
<div class="search">
<input class="search-field" type="text" />
<input class="search-button" type="submit" value="" />
</div>
Скриншот ниже от Chrome. Кажется, что я могу исправить это в Chrome после настройки CSS для поля, но затем он ломается в FF противоположным образом.
