Question

我遇到了对齐CSS搜索输入框的问题，例如在tutorial page上找到的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;在iPad / iPhone上的Safari中正确对齐，但在IE / FF / Chrome上无法正确显示。

任何帮助都会非常感激。感谢

Answer 1

我在本地测试它是否有效，如果您在页面顶部添加以下内容，则问题应该得到解决。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Answer 2

设置#delete {height:22px;}

#field的高度设置为22px，因此#delete上的高度必须相同。

作为旁注，我确信您已经这样做了，但如果没有，Firebug或Chrome工具在调试CSS，HTML，Javascript等方面非常有用。

THE FIX

行。我为你进一步排查了问题。这似乎对我有用（并且有意义），但我没有很好的方法在iOS上进行测试，所以你必须更新链接。出于某种原因，它正在向#field形式的三个边添加填充 - 1px。尝试将#field {padding-left：25px}更改为#field {padding：0 0 0 25px;这应该有效，因为#field和#delete上的长度设置为相同的值。让我知道它是否有效，我会更新我的答案。

仅限iPad / iPhone中的CSS搜索框对齐问题

2 个答案: