Placeholder text on search bar misaligned in Firefox

I have a univers开发者_C百科al search bar at the top of our site, and it works beautifully in both Chrome and Safari. The problem with Firefox is that the placeholder text is aligned to the bottom of the bar, instead of the middle. I know that placeholder is usually web-kit only, but this does show up in FF. See screenshot below:

Chrome:

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

FF:

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

and here is the code that goes along with it. 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>

and 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
}

It's the padding:7px 10px 0 30px; that make the text appears at the bottom in firefox. You have a padding-top of 7px and padding-bottom of 0px.

They have to be equal for the placeholder (or text) to be in the middle:

for example:

padding:3px 10px 3px 30px;

(I don't know if this will affect the good behavior in Chrome or Safari)