Fixing IE6/7 problems when using floated elements inside of a button element

Question

I am creating CSS buttons for both links and form submissions. I use almost the same markup for both, with a different wrapper.

HTML Examples:

Answer 1

There's a big stack of issues to consider here.

I'm going to be very verbose with the changes required to fix this.

To cajole it into working in IE6/7, these were my steps:

• Switch to using display: inline-block instead of float for the internals of the button.
  See: http://jsbin.com/omici3/2
• To fix the wonky alignment, we need to also add vertical-align: top.
  See: http://jsbin.com/omici3/3
• If you look at that previous demo in IE7, and click and hold the button, you can see it's too wide. We can fix that with overflow: visible (as per here: IE7 CSS padding issue - cannot figure out), and display: inline.
  See: http://jsbin.com/omici3/4

There's also some IE6 specific issues of low priority:

• The button:hover selector will not work in IE6. IE6 only supports :hover on a elements. To work around this, you can use the Whatever:hover fix.
• Due to your use of a .png image, in IE6 there is a grey background instead of transparency; there are fixes available. Though in this case, it's hard to notice. I'd say leave this one be - the extra effort is not worth the improvement.

More important is the fact that your current implementation is slightly broken in Firefox:

http://keeleux.com/dev/button/

(screenshot from Firefox 4)

• See here for why: Revisiting the Firefox button line-height bug... any 2011 solutions?
• The easiest way to workaround it in your case it to simply move the line-height to the internal ems.
  The final fixed version: http://jsbin.com/omici3/5

Note that a fair few of those issues can be worked around by simply using an a instead of a button.