Question

I’m hunting some very odd rendering issues in IE9 in windows 7. I’m using the microsoft "filter" method wherever there are gradients, it’s HTML5, and everything is in standards mode.

Please note, as there has been some confusion: This is happening everywhere there are rounded corners, including in situations where there are no gradients, and even no background color at all. The specific issue can be seen in the screenshots below as gaps in the border and color getting repeated on the x-axis, INSIDE the element.

As far as I can tell, I have set up everything correctly, and of course it all renders just fine in firefox and webkit browsers.

Has anyone ever seen this? I’m chasing my tail and googling turned up squat.

Input box:

DIV with gradient background:

Edit:

The twitter-bootstrap link provided below exhibits exactly the same issues on all their example elements. Smarter people than me are working on that project, so I’m racking this up as un-solvable with CSS alone. Feel free to close.

Answer 1

thats a known bug in IE9 and theres no really easy solution* to get rid of this. the easiest ways would be:

• use a background-image containing the gradient instead of a gradient for IE < 10
• use a plain background-color instead of a gradient for IE < 10

twitter bootstarp, for example has to deal with this, too. they’ve chosen to use a plain background-color for their buttons as you can read here:

In IE9, we drop the gradient on all buttons in favor of rounded
corners as IE9 doesn’t crop background gradients to the corners.

*ugly svg-for-ie-solution: http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/