CSS搜索框對齊問題僅

我遇到的問題與對準CSS搜索輸入框，如谷歌風格的一個在這個tutorial page找到。CSS搜索框對齊問題僅

我已經編輯，以適應我的設計代碼，但由於某種原因，我不能讓這個在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;}

To height：27px;在iPad/iPhone上的Safari中正確對齊，但在IE/FF/Chrome上無法正確顯示。

任何幫助將這個是非常讚賞。由於

來源

2012-02-21 presence

這裏是鏈接到的jsfiddle http://jsfiddle.net/YwZ8w/ – bassplayer7 2012-02-21 03:40:54

我本地測試它的工作原理，如果添加上你的頁面，那麼問題應該是固定的頂部以下。

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

來源

2012-02-21 03:27:24 Dips

不幸的是這引起了左側比在瀏覽器右邊大。 – presence 2012-02-21 03:34:02

你能提供一個鏈接;所以我可以看看它。 – Dips 2012-02-21 03:43:47

我發佈了一個顯示錯誤的jsfiddle。 – bassplayer7 2012-02-21 03:46:05

設置你的#field#delete {height:22px;}

的高度設置爲的22px所以它必須是相同的#delete。

作爲一個方面說明，我敢肯定，你這樣做了，但如果沒有，螢火蟲或Chrome工具可以在調試CSS，HTML，Javascript和更非常有幫助。

THE FIX

好的。我爲您進一步排除故障。這似乎對我有用（而且有意義），但我沒有一個好的方法來在iOS上進行測試，所以您將不得不更新鏈接。出於某種原因，它正在向#field表單的三個邊添加填充-1px。嘗試將#field {padding-left：25px}更改爲#field {padding：0 0 0 25px; }這應該工作，因爲#field和#delete上的高度都設置爲相同的值。讓我知道它是否有效，我會更新我的答案。

來源

2012-02-21 03:43:32 bassplayer7

我試過從24px改爲22px，但是仍然有對齊問題。任何進一步的建議將非常感激。 – presence 2012-02-21 03:47:37

這很有趣。我剛剛驗證了結果（在我的iPhone上的jsfiddle中，您能否與我們分享到您遇到問題的頁面的鏈接？ – bassplayer7 2012-02-21 03:52:36

非常感謝您的幫助@ bassplayer7我已上傳到[link]（http：// www .lyyk.com/search.html），其高度設置爲24px，並且[鏈接]（http://www.lyyk.com/search1.html）的高度設置爲22像素，但22像素不能正確對齊FF/Chrome等，以及24像素和22像素在iPad/iPhone上正確對齊 – presence 2012-02-21 04:06:00

CSS搜索框對齊問題僅

回答

相關問題