我在对齐 CSS 搜索输入框时遇到问题，就像在这个 tutorial page 上找到的 Google 风格一样.
我已经编辑了代码以适合我的设计，但出于某种原因，我无法使其在 iPhone/iPad 中正确对齐，右侧元素未与底部的左侧元素对齐。
The alignment issue can be seen here
代码如下:
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；在 iPad/iPhone 上的 Safari 中正确对齐，但在 IE/FF/Chrome 上无法正确显示。
任何帮助将不胜感激。谢谢
最佳答案
我在本地测试过它可以工作，如果您在页面顶部添加以下内容，那么问题应该得到解决。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
关于iphone - 仅 iPad/iPhone 中的 CSS 搜索框对齐问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9371622/