Styling button tags across all major browsers is not easy.
Many times you should be fine by using the native button style a browser-OS-combination offers you. But if you are trying to style buttons with images (e.g. by nesting a span
tag inside them as assigning a background to both button
and span
) it will look different on each browser.
Use this Sass Show archive.org snapshot snippet as a base style:
button
border: 0
padding: 0
cursor: pointer
overflow: visible // removes padding in IE
&::-moz-focus-inner
// removes padding in Firefox
border: none
padding: 0
Although some websites claim that either "padding: 0" or "border-width: 0" work for Firefox, you actually need both to cover all cases.
Posted by Arne Hartherz to makandra dev (2010-12-15 14:57)