Placeholder text is not vertically centered in Safari

Had this bug too. Setting line-height in ems fixed this for me. It looks the same in Chrome, Safari(desktop and iOS) and Firefox. and I added a \9 trick to get vertical centering in IE. here's my css

height: 36px;       
line-height: 1.2em;
line-height: 26px\9; /*for IE */

For me the best solution is to use line-height:normal and hack for IE 8.

<input type="text" name="test_name" placeholder="Search">


input {
    height: 35px;
    line-height: normal;
    line-height: 32px\0/; /* for IE 8 */
}

-Safari Solution-

I got stuck on this issue for a long time despite using

input::-webkit-input-placeholder { line-height:normal!important; }

It turns out that having a line-height in the immediate input element was breaking my input::webkit-input-placeholder line-height.

Solution extended:

I removed the line-height in my input style and it fixed my issue.

The easiest way is to use both the line-height and height CSS properties. Just give the text input a line-height with the same value as its height.

By the way, your live site looks okay to me in chrome 16.