internet-explorer - IE 11 border-radius 异常(在 IE 9 和 IE 10 中没有出现)

Question

我在 IE 11 中搜索过与 border-radius 相关的类似问题，但是 only one found on the Microsoft IE Developer site描述了自从“升级”到 IE 11 后我目前正在经历的事情。该帖子中帖子的答案是确保 DOCTYPE 是 HTML5，而不是 Quirks。

我目前正在完成网站的重新设计，是的，它是 HTML5 并且具有正确的 DOCTYPE，但我仍然遇到 border-radius 的奇怪问题。几乎每个我应用了边框半径的元素都有 1px 的偏移量。如果我取消选中 border-radius，问题就会消失，一切都很好，但令人震惊的是，这在 IE 9 或 IE 10 中不是问题。只有在几天前的 IE 11 之后，这个问题才浮出水面。我已经在带有 IE 11 的 Windows 7 和带有 IE 11 的 Windows 8.1 上进行了测试，两者都存在问题。

示例 1:

我有一个 border-radius: 5px 0 0 5px在这里，然后应用单独的伪元素 :before 和 :after 来获得尖 Angular 三 Angular 形，但 border-radius 似乎正在创建一条 1px 的白线，因此它不再与元素的其余部分齐平。这甚至在 IE 8 中也能正常工作，但现在在 IE 11 中被破坏了。如果我删除 border-radius，伪元素三 Angular 形再次与元素齐平。

示例 2:

安<a>显示为内联 block 的链接按钮具有线性渐变背景、蓝色 1px 实心边框和 border-radius: 4px .但是 border-radius 在 1px 的蓝色边框内创建了另一条 1px 的白线。无论任何其他 border-radius 值，白线都会保留，除非 border-radius 为 0。

示例 3:

三个 <a>链接元素设置为 display: inline-block在 <div> 里面相对于另一个定位 <div>在它下面。底部<div>有一个 border-radius: 4px , 和 <a>顶部内的元素 <div>在左上角和右上角有 border-radius(如图所示)。 IE 11 显示两者之间有 1px 的差距 <div>元素(如上面链接的其他海报线程所示)。但是如果 border-radius 在底部 <div>设置为0，间隙消失。

同样，这些实例在 IE 9 和 IE 10 中都不是问题；只是因为 IE 11 出现了带有 border-radius 元素的“1px 间隙”。我不知道如何解决它。当然没有其他浏览器受到影响。 Firefox、Safari、Opera 和 Chrome 都显示正常。

如有任何帮助，我们将不胜感激。

Answer 1

据我所知，IE11 中的 border-radius 存在一个错误。您描述的问题可能是大局的一部分。 More info .