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

【问题标题】：CSS Search Box Alignment Issue in iPad/iPhone Only仅 iPad/iPhone 中的 CSS 搜索框对齐问题
【发布时间】：2012-03-11 09:54:40
【问题描述】：

我在对齐 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;}

我注意到在下面更改了 height: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 上无法正确显示。

对此的任何帮助将不胜感激。谢谢

【问题讨论】：

这里是 jsfiddle jsfiddle.net/YwZ8w的链接

标签： iphone css ipad height alignment

【解决方案1】：

我在本地测试它可以工作，如果您在页面顶部添加以下内容，那么问题应该得到解决。

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

【讨论】：

不幸的是，这导致浏览器的左侧比右侧大。
能否提供链接；所以我可以看看。
我已经更新了答案，因为我发现代码导致对齐高度出现问题。但我在 jsfiddle 上测试它不起作用，它在本地工作。
再次感谢您的回复。我已经更改了link 的 DOCTYPE，但在 iPad/iPhone 上仍然遇到问题。
您可以发送您的实际链接吗？不在 jsfiddle 上

【解决方案2】：

设置#delete {height:22px;}

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

顺便说一句，我相信您已经这样做了，但如果没有，Firebug 或 Chrome 工具在调试 CSS、HTML、Javascript 等方面会非常有帮助。

修复

好的。我为您进一步排除故障。这似乎对我有用（并且有道理），但我没有在 iOS 上测试的好方法，所以你必须更新链接。出于某种原因，它在#field 表单的三个侧面添加了填充 - 1px。尝试将 #field { padding-left:25px } 更改为 #field { padding: 0 0 0 25px;这应该可以工作，因为长高度在#field 和#delete 上都设置为相同的值。让我知道它是否有效，我会更新我的答案。

【讨论】：

我已尝试将 24px 更改为 22px，但仍然存在对齐问题。任何进一步的建议将不胜感激。
这很有趣。我刚刚验证了结果（在我 iPhone 上的 jsfiddle 中。你能与我们分享一个链接到你遇到问题的页面吗？
非常感谢您的帮助@bassplayer7 我已经上传到link，它的高度设置为24px，还有link，它的高度设置为22px，但22px在FF/中没有正确对齐Chrome 等和 24px 或 22px 在 iPad/iPhone 上正确对齐。
好的。我为您进一步排除故障。这似乎对我有用（并且有道理），但我没有在 iOS 上测试的好方法，所以你必须更新链接。出于某种原因，它向#field 表单的三个边添加了填充 - 1px。尝试将#field { padding-left:25px } 更改为#field { padding: 0 0 0 25px; } 这应该可以工作，因为在#field 和#delete 上将long height 设置为相同的值。让我知道它是否有效，我会更新我的答案。
我想借此机会感谢 bassplayer7。该解决方案在 iOS 上完美运行。非常感谢！