搜索欄上的佔位符文本在Firefox中未對齊

我在我們網站的頂部有一個通用搜索欄，它在Chrome和Safari瀏覽器中都可以很好地工作。 Firefox的問題在於佔位符文本對齊到了欄的底部，而不是中間。我知道佔位符通常只是web-kit，但是這在FF中顯示。見下圖：搜索欄上的佔位符文本在Firefox中未對齊

鉻：

http://www.cl.ly/2N3k340744071s1x291f

FF：

http://www.cl.ly/1e16472P2p1w0G2E062I

，這裏是與它一起去的代碼。 HTML;

<form action="#" id="nav_search_form"> 
       <p><input type="text" placeholder="Search Careers And People" class="search" id="nav_search_q" /></p> 
       <input type="submit" style="visibility:hidden;"> 
       <script type="text/javascript"> 
        $('#nav_search_form').submit(function() { 
        Company.SearchBox.search(); 
        return false; 
        }); 
       </script> 
       </form>

和CSS：

input.search { 
    border:1px solid #bdbdbd; 
    padding:7px 10px 0 30px; 
    font:13px/15px "Helvetica Neue", Helvetica, Arial, sans-serif; 
    background:url(images/search.png) no-repeat 0 center; 
    color:#525252; 
    width:190px; 
    -moz-border-radius:12px; 
    -webkit-border-radius:12px; 
    -o-border-radius:12px; 
    -ms-border-radius:12px; 
    -khtml-border-radius:12px; 
    border-radius:12px; 
    margin-top:17px; 
    margin-left: 0px; 
} 

input.search.placeholder { 
    color:#b3b3b3; 
} 

input.search:hover { 
    border-color:#8c8c8c 
} 

input.search:focus { 
    border-color:#39b2e5 
}

來源

2011-06-09 sthomps

忘了提，謝謝！ – sthomps 2011-06-09 23:52:06

這是padding:7px 10px 0 30px;，使文字出現在Firefox中的底部。您有padding-top的7px和padding-bottom的0px。

他們必須相等的佔位符（或文字）是在中間：

例如：

padding:3px 10px 3px 30px;

（我不知道這是否會影響到良好的行爲Chrome或Safari）

來源

2011-06-09 23:58:23 manji

它的工作！謝謝！！ - 超級簡單的修復，但我很感激。 – sthomps 2011-06-10 01:15:52

搜索欄上的佔位符文本在Firefox中未對齊

回答

相關問題