How to prevent button text movement when button is active in Firefox?
Sample:
<button>Button</button>
button {
border: medium none;
margin-top: 17px;
width: 224px;
height: 40px;
background: none repeat scroll 0% 0% #7BA6BB;
color: #FFF;
outline: medium none;
cursor: pointer;
}
http://codepen.io/anon/pen/ByaLZN
Browser: Mozilla Firefox (the latest version)
When button is clicked (active), button text moves right. How To prevent it?
http://jsfiddle.net/reg8f6eo/ as one of solutions : add padding:0 for button:active
Or you can add span (or maybe other tag that you like) into your button like this http://jsfiddle.net/reg8f6eo/1/
If text is moving right - move button left, so text will remain in his position:
http://jsfiddle.net/goc68jy4/2/
button {
...
padding:0px;
}
button:active{
margin-left:-2px;
padding-left:4px;
}
Add reset css
*{margin:0; padding:0;}
Demo
链接地址: http://www.djcxy.com/p/23480.html上一篇: Android对等连接的应用程序流？