在Chrome中點擊按鈕

我在Firefox中製作了一個按鈕，效果很好，但是在點擊按鈕之後Chrome中文本並沒有移動，因此點擊沒有任何按鈕效果。我想爲Chrome修復這個問題，但仍然不會搞亂Firefox的代碼。在Chrome中點擊按鈕

Demo

.btn{ 
     background:-moz-linear-gradient(top,#64b24c 1%,#5ba045 31%,#509339 80%); 
     background:-webkit-linear-gradient(top,#64b24c 1%,#5ba045 31%,#509339 80%); 
     border:1px solid rgba(70,140,60,0.8); 
     border-radius:3px; 
     height:30px;width:80px; 
     font-family:Corbel;font-weight:bold;font-size:16px;color:#FFF; 
     text-shadow:rgba(3,3,3,0.8) 1px 1px 2px; 
     padding-bottom:3px; /*bad*/ 
     padding:0px 0px 2px 0px; /*good*/ 
    } 
    .btn:hover{cursor:pointer;} 
    .btn:active{ 
     background:#509339; 
     padding:2px 0px 3px 1px; /*bad*/ 
     padding:0px 0px 0px 2px; /*good*/ 
}

的問題是，鉻不反應以填充左：1px的;我將其更改爲2px，Chrome和Firefox都可以正常工作。

來源

2013-04-13 Dan Miller

它看起來像點擊唯一的變化應該是背景 - 文本爲什麼會移動？另外，我們可以假設你正在將這個類應用到'button'元素（而不是''div'，它沒有「active」狀態）嗎？ –

用戶代理樣式表Chrome對按鈕有padding: 2px 6px 3px 6px。所以，當你將它設置爲2px時，你的頂部填充沒有改變。

你可能想明確地覆蓋在未按下按鈕的填充，讓你得到同樣的效果，無論瀏覽器設置。

來源

2013-04-13 15:33:46

你是對的，我需要對Firefox和Chrome都有同樣的效果。我如何實現這一目標？ –

謝謝你的提示。我修好了它。 –

在我的鍍鉻版（v26）上，背景確實發生變化，文字不移動。我可能會建議您從填充卸下BTN類漢字：

padding:3px;

這樣，你會看到一個運動，你就可以調整它

來源

2013-04-13 15:28:52

在Chrome中點擊按鈕

回答

相關問題