Question

我的网站顶部有一个通用搜索栏，它在Chrome和Safari中运行良好。 Firefox的问题是占位符文本与条形图的底部对齐，而不是中间。我知道占位符通常只是web-kit，但这确实出现在FF中。见下面的截图：

Chrome：

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
}

Answer 1

padding:7px 10px 0 30px;使文本显示在firefox的底部。您有padding-top 7px和padding-bottom 0px。

它们必须等于占位符（或文本）位于中间：

例如：

padding:3px 10px 3px 30px;

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

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

1 个答案: