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

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:

<button type="submit">
  <em>Submit</em>
  <em class="cap"></em>
</button>

<a class="button">开发者_如何学运维
  <em>Submit</em>
  <em class="cap"></em>
</a>

The CSS:

.button, button {
  display: block;
}
button em,
.button em {
  display: block;
  float: left;
  background: url(button.png) 0 0;
  height: 30px;
  padding: 0 0 0 10px;
}
button em.cap,
.button em.cap {
  padding: 0;
  width: 10px;
  background-position: 100% 0;
}

Now, in IE6/7, the anchor element version of this works. The problem comes in when using the button element, it causes the second em element to wrap.

I've tried some workarounds that I've found for button elements, but nothing I've found had a case quite like this. The reason I've floated the two elements left is because I need the button to be transparent, so other methods don't work here.

Here's an example of what I'm doing: http://keeleux.com/dev/button/

Any help is appreciated!

Thanks, Eric

---

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.

---

@Eric, save yourself time and go with a solution that's already been fought with and tested and verified in all the major browsers.....jQuery UI buttons does this right out of the box. As an extra bonus, they can be styled with Themeroller for quick changeout on the backend and even user-selectable themes on the front-end.

Check out this tut for more details.