The UX.SE CSS for tags (.post-tag) and buttons(input[type="submit"], input[type="button"]) breaks in IE9+ and WP7+ browsers. The background gradient overflows the rounded corners. Like this (enlarging for clarity):

enter image description here

This is a known problem with the combiation of border-radius and the IE-proprietary gradient filter. See https://github.com/jquery/jquery-mobile/issues/2046 for more info about the problem.

There are workarounds (e.g. wrapping the <a> in another tag with overflow:none, using a background image, etc.). But it's also probably OK to simply remove the filter: gradient from any element that also has a border-radius. This means IE users won't see gradients on tags or buttons, but at least the site won't look buggy.

Given the infrequent usage of IE among UX.SE regulars I don't think fixing this is a high priority, but there are IE users coming in from Google to read our posts and it may hurt the site's credibility to look bad on a popular modern browser.

| |

For now, we have removed gradient for the tags, for IE only. The fix will be in the next prod build.

| |

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .