button-span revisited

After having used a <button><span> structure to create cross-browser sliding-doors-styled buttons for a while, I decided to write about the issues I've stumbled across, and ways I've found to fix them:

1. Widths go out of whack in IE, depending on the amount of text in the button - weird bug with an easy but non-obvious solution: add overflow:visible to the button.
2. Firefox aligns the background images wrong vertically - this has to do with a bug in the way button borders are handled. To make everything align, set both background-position's to center vertically.
3. Pressing the button looks ugly in IE - this issue has a somewhat obvious fix: to add position:relative to the inner span. The catch is that this fix introduces another nasty bug in IE (if you have dynamically generated html): the span won't redraw properly when the button needs to move due to stuff being added to the page via ajax. You end up with half of the button where it's supposed to be, and the other half sitting where it was. In IE7, we can apply position:relative only to the hover state, but I don't have a good solution for IE6 :(

So in summary, the CSS rules I use nowadays to style button-span's are these:

<style>
button,button span {
  background:url(button.gif) no-repeat 0 center;
  float:left;
  line-height:16px;
  padding:0 0 0 10px;
  white-space:nowrap;
}
button {
  background-position:100% center;
  border:0;
  overflow:visible;
  padding:0 10px 0 0;
}
* html button span,button:hover span {
  position:relative;
}
</style>
<button><span>Do Stuff</span></button>