У меня возникают проблемы с выравниванием поля ввода для поиска CSS, например, в стиле Google, которое можно найти на этой странице учебника .
Я отредактировал код в соответствии с моим дизайном, но по какой-то причине я не могу настроить его для правильного выравнивания в iPhone / iPad, когда правый элемент не совпадает с левым элементом внизу.
Проблема выравнивания может быть замечена здесь
Код выглядит следующим образом:
HTML:
<div id="search">
<form name="" action="" type="">
<input type="text" name="field" id="field" />
<div id="delete"><span id="x">x</span></div>
</form>
</div>
CSS:
#search {float:left; margin:11px 0 0 156px;}
#field {float:left;width:200px; height:22px; line-height:22px; text-indent:0px; font-family:arial,sans-serif; font-size:12px; color:#999; background: #fff; background:url('search-icon.png') no-repeat left center; padding-left:25px; border:solid 1px #d9d9d9; border-right:none; -webkit-appearance:none; -webkit-border-radius:0px;}
#field:focus {outline:none;}
#delete {float:left; width:16px; height:24px; line-height:22px; padding:0 0 0 6px; font-family:"Lucida Sans", "Lucida Sans Unicode",sans-serif; font-size:14px; background:#FFFFFF; border:solid 1px #D9D9D9; border-left:none; -webkit-appearance:none; -webkit-border-radius:0px;}
#delete #x {color:#999999; cursor:pointer; display:none; }
#delete #x:hover {color:#666666;}
Я заметил, что изменение высоты: 24px ниже:
#delete {float:left; width:16px; height:24px; line-height:22px; padding:0 0 0 6px; font-family:"Lucida Sans", "Lucida Sans Unicode",sans-serif; font-size:14px; background:#FFFFFF; border:solid 1px #D9D9D9; border-left:none; -webkit-appearance:none; -webkit-border-radius:0px;}
до высоты: 27px; корректно выравнивается в Safari на iPad / iPhone, но затем неправильно отображается в IE / FF / Chrome.
Любая помощь будет очень цениться с этим. Спасибо