搜索栏上的占位符文本在Firefox中未对齐

问题描述

| 我在网站顶部有一个通用的搜索栏，它在Chrome和Safari中均可正常使用。 Firefox的问题在于，占位符文本对齐到条形底部而不是中间。我知道占位符通常仅是Web-kit，但这确实显示在FF中。请参见下面的屏幕截图： 铬： 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
}

    

解决方法

        是使文本显示在Firefox底部的“ 2”字。 您有

padding-top

的

7px

和

padding-bottom

的

0px

。 它们必须相等，以使占位符（或文本）位于中间： 例如：

padding:3px 10px 3px 30px;

（我不知道这是否会影响Chrome或Safari中的良好行为）