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):
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.