如何删除 Safari 5 中按钮上的 3px 左右多余空间？

Question

我正在尝试在我当前的项目跨浏览器中设置按钮样式。当我在 Safari 中检查这些按钮时，它们看起来与任何其他浏览器都不同，甚至是 Chrome。一般来说，按钮在 FF、IE6-8、Opera 和 Chrome 中看起来是一样的。但在 Safari 中，按钮在左右两侧有 3px 未知的额外空间，因此按钮在 Safari 中看起来比在 Chrome 或其他浏览器中更宽。 Safari 网络检查器中按钮的总宽度比 Chrome 网络检查器大 6 像素。此外，这种奇怪的行为只有在按钮具有宽度：自动时才会发生，固定宽度的按钮看起来很好。由于 Safari 和 Chrome 具有相同的布局引擎（webkit），我有点尴尬。

这是我正在谈论的演示：

http://iliadraznin.com/examples/css-only-buttons/ - 检查 Chrome 中的蓝色按钮，然后与 Safari 进行比较（您可以在网络检查器中看到确切的差异）。

更新：这个例子不是我的，它只是说明了 Safari 的行为。这是我的确切 CSS 和 HTML：

<button class="blueButton" type="submit">Register</button>

.blueButton {
    color:#fff;
    background:#007ec6;
    border:2px solid #211b4d;
    cursor:pointer;
font:14px Arial;
text-shadow:#003585 0 -1px 1px;
width:auto;
overflow: visible;
padding:0 13px;
height:26px;
white-space:nowrap;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
behavior:url(PIE.htc);
position:relative;}

button::-moz-focus-inner {padding:0;border:0;} 

如果您将完全删除填充，您将在 Safari 中看到那额外的小空间

有什么办法可以去掉 Safari 中这个多余的按钮空间？

Answer 1

这就是您要寻找的答案：

.blueButton {
    color:#fff;
    background:#007ec6;
    border:2px solid #211b4d;
    cursor:pointer;
    font:14px Arial;
    text-shadow:#003585 0 -1px 1px;
    width:auto;
    overflow: visible;
    padding:0 13px;
    height:26px;
    white-space:nowrap;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    behavior:url(PIE.htc);
    position:relative;
}

.blueButton::-moz-focus-inner {padding:0;border:0;} 
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .blueButton {
        margin: 0px;
    }
}