нажатие кнопки в Chrome

Question

Я сделал кнопку в Firefox, и она отлично работает, но в Chrome после нажатия кнопки текст не перемещается, поэтому на клик нет эффекта кнопки. Я хочу исправить это для Chrome, но все равно не испортить код для Firefox.

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.

Answer 1

Агент пользователя таблицы стилей для У Chrome есть padding: 2px 6px 3px 6px для кнопок. Таким образом, ваше верхнее дополнение не меняется вообще, когда вы устанавливаете его на 2px.

Возможно, вы хотите явно переопределить заполнение для кнопки с нажатой кнопкой, чтобы вы получили тот же эффект, независимо от настроек браузера.

Answer 2

На моей версии chrome (v26) фон меняется, текст не перемещается. Я мог бы предположить, что вы удалите -bottom из отступов на классе БТН:

padding:3px; 

Таким образом, вы будете видеть движение, и вы сможете настроить его