10

私が取り組んでいる新しいサイトの大まかな例に取り組んでいます。

何らかの理由で、Firefox(latest) のこれらのボタンの後の 2 つは、アクティブな状態になると、クリック アニメーションを実装しているかのように、テキストをわずかに移動します。最初のボタンでもこの問題が発生しないのはなぜですか?

以下のコード

<fieldset style="width:320px; float:left;">
        <legend>Pink Button</legend>
            <button class="pinkbutton"><span>MESSAGE HERE</span></button>
            <button class="pinkbuttondisabled" disabled="disabled"><span>DISABLED</span></button>

    </fieldset>

    <fieldset style="width:320px; float:left;">
        <legend>Grey Button</legend>
            <button class="greybutton"><span>MESSAGE HERE</span></button>
            <button class="greybuttondisabled" disabled="disabled"><span>DISABLED</span></button>

    </fieldset>

    <fieldset style="width:320px; float:left;">
        <legend>White Button</legend>
            <button class="whitebutton"><span>MESSAGE HERE</span></button>
            <button class="whitebuttondisabled" disabled="disabled"><span>DISABLED</span></button>

    </fieldset>

以下のCSS

.pinkbutton { border:1px solid #D2247b; width:150px; height:30px; background-color:#EF0093; color:#FFF;}
.pinkbutton:hover {border:1px solid #FF4296; background-color:#FF5EAC;}
.pinkbutton:active {border:1px solid #A61D61; background-color:#DC2F85; color:#333232;}
.pinkbuttondisabled {border:1px solid #F3C4DB; width:150px; height:30px; background-color:#FDC6E2; color:#FFF;}


.greybutton { border:1px solid #BBBBBB; width:150px; height:30px; background-color:#E2E2E2; color:#8d8c8c;}
.greybutton:hover {border:1px solid #EF0093; background-color:#E2E2E2; color:#f62c92;}
.greybutton:active {border:1px solid #696969; background-color:#BFBFBF; color:#424242;}
.greybuttondisabled {border:1px solid #D5D4D4; width:150px; height:30px; background-color:#F4F4F4; color:#d5d4d4;}

.whitebutton { border:1px solid #EF0093; width:150px; height:30px; background-color:#FFF; color:#EF0093;}
.whitebutton:hover {border:1px solid #898989; background-color:#FFF; color:#898989;}
.whitebutton:active {border:1px solid #898989; background-color:#E2E2E2; color:#979696;}
.whitebuttondisabled {border:1px solid #FAB2DE; width:150px; height:30px; background-color:#FFF; color:#FAB2DE;}

どんな助けでも大歓迎です

4

2 に答える 2

26

:active 状態にパディングがあるようです。「パディング: 0;」を追加しました 最初のcss宣言に（状態に関係なく継承されるように）、問題を修正しました。

このjsfiddleを参照してください。

ただし、最後の 2 つのボタンだけで発生した理由はわかりません。

于 2012-06-07T11:48:54.840 に答える
0

ジェームズ・ヒーリーのソリューションはうまく機能します。http://jsfiddle.net/pxx4V/ 3 つのボタンに同じ問題があることを明確にしたかったのです。これは、.pinkbutton:active のテキストの色を #FFF http://jsfiddle.net/6L6yu/に変更したところです。

于 2012-06-07T12:09:47.983 に答える