IE 11 border-radius怪异（在IE 9和IE 10中没有出现） [英] IE 11 border-radius weirdness (did not occur in IE 9 and IE 10)
问题描述
我在IE 11中搜索过与border-radius相关的类似问题，但。
I have searched for similar questions related to border-radius in IE 11, but only one found on the Microsoft IE Developer site described what I am also currently experiencing since "upgrading" to IE 11. The answer to the post in that thread was to make certain the DOCTYPE was HTML5, and not Quirks.
I am currently finishing a redesign on a website and yes, it's HTML5 and has the correct DOCTYPE, but I am still getting a weird problem with border-radius. There's a 1px offset to almost every element where I've applied a border-radius. If I uncheck border-radius, the problem disappears and all is fine, but shockingly this wasn't an issue in IE 9 or IE 10. Only since IE 11 a few days ago, has this problem surfaced. I have tested on both Windows 7 with IE 11 and Windows 8.1 with IE 11, and the problem exists on both.
Example 1:
I have a border-radius: 5px 0 0 5px here, and then apply separate pseudo elements :before and :after to get the pointed triangle, but the border-radius seems to be creating a 1px white line, so it's no longer flush with the rest of the element. This worked fine even in IE 8, but is now broken in IE 11. If I remove the border-radius, the pseudo element triangle becomes flush with the element again.
Example 2:
An <a> link button, displayed as inline-block has a linear-gradient for a background, a blue 1px solid border and border-radius: 4px. But the border-radius creates another 1px white line inside the blue 1px border. No matter any other border-radius value, the white line remains unless border-radius is 0.
Example 3:
Three <a> link elements set to display: inline-block inside a <div> positioned relative to another <div> below it. The bottom <div> has a border-radius: 4px, and the <a> elements inside the top <div> have border-radius on the top left and right (shown). IE 11 displays a 1px gap between the two <div> elements (like shown in the other posters thread linked above). But if the border-radius on the bottom <div> is set to 0, the gap disappears.
Again, none of these instances were an issue in IE 9 and IE 10; only since IE 11 has this "1px gap" with elements having border-radius appeared. I don't know how to fix it. Of course no other browsers are affected. Firefox, Safari, Opera, and Chrome all display fine.
Any help would be greatly appreciated.
As far as I know there's a bug with border-radius in IE11. The issue you describe may be part of the bigger picture. More info.
这篇关于IE 11 border-radius怪异（在IE 9和IE 10中没有出现）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
