Chrome和IE9没有按钮上的文字居中

Question

我正在使用YUI3的重置样式表和来自Google webfont的PT Sans。

我已将我的测试用例缩减至：

<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.5.0pr4/build/cssreset/cssreset-min.css">

<ul>
  <li>
    <input type="submit" value="Create Role" name="submit" id="submit">
 </li>
</ul>

风格：

input[type=submit]{
  background: #000000;
  font: 13px 'PT Sans', sans-serif;
  margin-left: 15px;
  padding-bottom: 5px;
  height: 38px;
  color: #FFFFFF;
  border: 0;
  width: auto;
}

我只在IE9，Chrome 17和Firefox 11中测试过。在Firefox中，文本位于按钮的中心，但在Chrome和IE中，文本不在中心。

在这里小提琴：http://jsfiddle.net/Gx79V/6/

用于比较的图像：

由于这个原因，按钮看起来非常不专业。如何解决这个问题？

Answer 1

使用以下方法解决了这个问题：

//Remove paddings
input, button{
  padding: 0;
}

//Remove for mozilla
input::-moz-focus-inner {
  border:0;
  padding: 0;
}

Answer 2

这个here在chrome中工作正常，即我刚刚移除了填充底部