如何刪除Safari 5中按鈕上的3px左右額外空間？

Question

我想在我當前的項目跨瀏覽器樣式按鈕。當我在Safari瀏覽器中查看這些按鈕時，他們看起來與其他任何瀏覽器，甚至Chrome都不一樣。一般來說，按鈕在FF，IE6-8，Opera和Chrome中都是一樣的。但在Safari按鈕的左右兩側有3px未知的額外空間，因此按鈕在Safari瀏覽器中看起來更寬，而不是在Chrome或其他瀏覽器中。 Safari web inspector中按鈕的總寬度比Chrome web檢查器中的大6px。此外，這種奇怪的行爲只發生在按鈕的寬度爲：auto時，固定寬度的按鈕顯示得很好。由於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; 
    } 
}