Заполнитель текста в строке поиска смещен в Firefox - PullRequest
Новая
       11

Заполнитель текста в строке поиска смещен в Firefox

0 голосов
/ 10 июня 2011

У меня есть универсальная панель поиска в верхней части нашего сайта, и она прекрасно работает как в Chrome, так и в Safari. Проблема с Firefox состоит в том, что текст заполнителя выравнивается по нижней части панели, а не по середине. Я знаю, что местозаполнителем обычно является только веб-кит, но это видно в 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
}

1 Ответ

0 голосов
/ 10 июня 2011

Это padding:7px 10px 0 30px;, благодаря которому текст появляется внизу в Firefox.У вас есть padding-top из 7px и padding-bottom из 0px.

Они должны быть равны, чтобы заполнитель (или текст) находился посередине:

дляпример: 

padding:3px 10px 3px 30px;

(не знаю, повлияет ли это на хорошее поведение в Chrome или Safari)

...