0

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*/
}

問題は、Chrome が padding-left: 1px; に反応しないことでした。2px に変更すると、Chrome と Firefox の両方ですべて正常に動作します。

4

2 に答える 2

1

私のバージョンの chrome (v26) では、背景は変わりますが、テキストは動きません。btn クラスのパディングから -bottom を削除することをお勧めします。

padding:3px;

そうすれば、動きが見えて調整できるようになります

于 2013-04-13T15:28:52.980 に答える