Safari 5のボタンの3px左右余分スペースを削除するには？

Question

現在のプロジェクトクロスブラウザでボタンのスタイルを設定しようとしています。 Safariでこれらのボタンを確認したところ、他のブラウザ、Chromeでも違って見えました。一般的にボタンはFF、IE6-8、Opera、Chromeで同じように見えます。しかし、Safariのボタンは左右に3pxの余分なスペースがあるため、Chromeや他のブラウザではなくSafariでボタンが広く見えます。 Safariウェブインスペクタのボタンの合計幅がChromeウェブインスペクタよりも6px大きいまた、この奇妙な動作は、ボタンに幅：自動があり、固定幅のボタンがうまく表示される場合にのみ発生します。 SafariとChromeは同じレイアウトエンジン（Webkit）を持っているので、私は少し恥ずかしいです。ここで

はI`mが話して何のデモです：

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でこの余分なボタンのスペースを取り除くためにどのような方法がありますでしょうか？ここで

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