5

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.

2

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 .