Firefox中的按鈕

Fiddle - 只需在Chrome和Firefox中打開它，全部最新。Firefox中的按鈕

有.button類在我的CSS - 我用它爲所有類型的按鈕：a.button，button.button等

正如你看到的，有沒有什麼區別在Chrome之間的button.button和任何其他* .button元素。正如你在FF - 中看到的button.button比任何其他* .buttons稍大。

我該如何讓FF正確渲染任何按鈕，比如Chrome呢？

UPDATE： 這絕對不是SO上的任何帖子的重複。

StackOverflow的請求代碼：

.button { 
 
    font: normal 100% Arial, sans-serif; 
 
    position: relative; 
 
    display: inline-block; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    vertical-align: middle; 
 
    color: #00f; 
 
    background-color: transparent; 
 
    border: 1px solid #00f; 
 
    border-radius: 3px; 
 
    user-select: none; 
 
    outline: 0; 
 
    cursor: pointer; 
 
    white-space: nowrap; 
 
} 
 

 
.button_medium { 
 
    padding: 0 12px; 
 
} 
 

 
.button__text { 
 
    font-weight: 400; 
 
    display: inline-block; 
 
    line-height: 1; 
 
    vertical-align: top; 
 
    white-space: nowrap; 
 
} 
 

 
.button__text_medium { 
 
    font-size: 90%; 
 
    line-height: 28px; 
 
    letter-spacing: -1px; 
 
}

<div style="padding:5em;"> 
 
    <button class="button button_medium" type="button"> 
 
     <span class="button__text button__text_medium">Save</span> 
 
    </button> 
 

 
    <label class="button button_medium"> 
 
     <span class="button__text button__text_medium">Save</span> 
 
    </label> 
 

 
    <span class="button button_medium"> 
 
     <span class="button__text button__text_medium">Save</span> 
 
    </span> 
 

 
    <a class="button button_medium"> 
 
     <span class="button__text button__text_medium">Save</span> 
 
    </a> 
 
</div>

來源

2014-11-22 artuska

可能重複[刪除在Firefox額外的按鍵間距/填充]（http://stackoverflow.com/questions/5517744/remove- extra-button-spacing-padding-in-firefox） – 2014-11-22 14:11:14

不，這絕對不是重複 - 只要打開你的鏈接閱讀什麼是寫在那裏。 – artuska 2014-11-22 14:17:14

您是否嘗試過？ AFAIK它真的是重複的。另請參見：http://css-tricks.com/forums/topic/button-padding-issue/

下面的代碼將解決您的問題：的

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

來源

2014-11-22 14:57:37

OMG，我真的已經嘗試在.button類中放入＆:: - moz-focus-inner {...}，並且它在SASS和Autoprefixer中不起作用。所以，似乎Autoprefixer已經削減了-moz規則。 Aaaargh！ – artuska 2014-11-22 15:05:28

Firefox中的按鈕

回答

相關問題