css-Taste aktiven Zustand verursacht, text zu bewegen?
Ich bin gerade an ein paar grobe Beispiele für eine neue site an der ich arbeite.
für einige Grund, der später 2 dieser Schaltflächen in firefox(neueste Version) verschieben Sie den text geringfügig, wenn die Umsetzung einer auf animation, wie Sie in den aktiven Zustand. warum würde der erste Knopf nicht auch das Problem?
code unten
<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 unten
.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;}
jegliche Hilfe würde sehr geschätzt werden
Du musst angemeldet sein, um einen Kommentar abzugeben.
Erscheint, es gibt einige padding auf der :active-Zustand. Ich fügte hinzu, 'padding: 0;" auf der ersten css-Deklarationen (so, dass es vererbt, unabhängig von Zustand) und es wurde das Problem behoben.
Finden Sie in diesem jsfiddle.
Ich weiß nicht, warum es passiert ist, nur die letzten 2 Knöpfe aber.
James Healey Lösung funktioniert Super. http://jsfiddle.net/pxx4V/
Ich wollte nur klarstellen Sie die drei Schaltflächen, die das gleiche problem hatten, es war nur ein "optischer Effekt", dass machen Sie scheinen Sie nicht. Hier ist ein Turnschuh, mit dem problem, wo ich gerade geändert die Farbe für den text der .pinkbutton:aktiv #FFF http://jsfiddle.net/6L6yu/