CODEWITHSUNDEEP
cssinternet-explorer-9rendering
Carson C.
Carson C.

Reputation: 2382

Messed up rendering of rounded corners in IE9

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:

Round corners, input box Input Box

DIV with gradient background:

enter image description here

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.

Upvotes: 3

Views: 2833

Answers (2)

oezi
oezi

Reputation: 51797

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/

Upvotes: 3

CherryFlavourPez
CherryFlavourPez

Reputation: 7497

IE Filters and rounded corners don't play nicely together. You're going to have to choose between a solid background colour or square corners for IE. Vendor prefixed gradients are going to be supported in IE10, so there is that at least.

Twitter make note of this on the Bootstrap site, saying:

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

Upvotes: 2

Related Questions