Button Text dissapears using overflow:visible within IE7

In Internet Explorer, there is unnecessary padding that occurs to the left and right within the button when the button name is large. As a result of this, the known solution is to add "width: auto" and "overflow:visible" to the button style, but doing so will inadvertently make the text in the button disappear when the 开发者_高级运维user scrolls the page down and then back up.

I would very much like to use the style I've included so the padding stays removed, but more importantly resolve the issue with the button text disappearing. It's really an odd one!

I've created this DEMO page for you to test the code where it's happening: http://jsbin.com/uhuze3

Note: You'll need IE7 to see the issue, so for those who don't have it, I create this video for you to see the issue. http://screencast.com/t/MTg0NzY2Zj

I was able to resolve this and improve the code a bit.

You can see the code here: http://jsbin.com/uhuze3/4

This was the old code: http://jsbin.com/uhuze3

Edit by Johnny5 : It seem to be the combinaison of "height" and "line-height" that correct the bug.