I’ve run into an IE 7 bug that I’ve been unable to fix. I’m hoping some of you, dear readers, can help me figure it out.
I’m working on some styled buttons, created with the
<button> element and some pretty basic CSS. In IE 7, if you scroll down the page so that the buttons move out of the viewport, then scroll back up to reveal them again, you’ll see lines of missing pixels drawn across the text of the buttons. It varies each time you scroll, so sometimes you won’t see any lines, and occasionally the entire text will disappear. The lines appear most often with the buttons with the largest text, but I think this is mainly just due to there being more pixels there to draw lines through, increasing the likelihood that IE 7 can screw it up. Hovering over the buttons or refreshing the page restores the text.
You can see a screenshot of the bug below, and view the bug live in IE 7 in my test page.
I found a blog post that said that adding a one-pixel transparent border fixed the bug. I tried this and found that it does indeed fix the bug, but only if you remove either
font-size. Both of those properties trigger the bug to begin with, and the border fix seems to only have enough power to fix one of the triggers, not both. I can’t remove either of those properties, so the border fix is a no-go. (Plus, the border does not actually show as transparent when I tested it, which makes it a deal-breaker anyway.)
Through experimenting, I found that removing
overflow:visible also solves the bug. Unfortunately, that brings back the excess padding button bug that IE 7 and IE 6 suffer from. Setting
overflow:visible seems to be the only fix for this bug, so this too is a property I can’t remove.
I of course tried the standard fixes of adding
position:relative, but neither of these, either together or separately, had any effect on the buttons.
I’ve tried so many things and I’m out of ideas. Can anyone help?