bootstrap-theme.css: Button corners look funny in IE9 due to gradient filter

[arechsteiner]

Code snippet:

<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
...
<button type="submit" class="btn btn-success">Submit</button>

Result in IE9 (magnified):

I'm not entirely sure what causes this bug. But I think it has something to do with the IE gradient filter called by the mixin .btn-styles(@btn-color: #555;) in theme.less, which then calls the vertical gradient mixin, with this attribute:

filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down

When I comment this filter, then the button has rounded corners (but lacks gradient obviously). But then again, I think the same filter was used in Bootstrap 2.3 and there it works fine.

[saas786]

@arechsteiner it's not a core framework issue, its a theme related issue. So it is v. highly unlikely you get theme fixes support. Anyway, your solution lies in this post
http://stackoverflow.com/questions/4036963/in-ie-how-do-i-remove-a-filter

use ie9 conditional comment and load ie9 specific css and in that set filter: none; so ie9 won't screw it.

And it should solve your issue.

[arechsteiner]

@saas786:

it's not a core framework issue, its a theme related issue.

Not sure what you mean, bootstrap-theme.css is part of the Bootstrap framework and delivered with it. It's not a third party component.

use ie9 conditional comment and load ie9 specific css and in that set filter: none

I don't think that's a good solution as it would simply remove the gradient in IE9. As I said earlier, the whole thing worked fine in BS 2.3.2.

[cvrebert]

@saas786 No, the theme is absolutely officially supported, and we're definitely going to address this.

[mdo]

In 2.x we removed the gradient for IE9. Edit: And we'll do the same thing here.

[arechsteiner]

@mdo: Had to check again to realize this. I was under the impression that there was a gradient in IE9. Well then..