IE 11边界半径怪异（在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，这个问题浮出水面。我已经在Windows 7上使用IE 11和Windows 8.1使用IE 11进行了测试，并且两者都存在问题。

示例1：

我在这里有一个border-radius: 5px 0 0 5px，然后应用单独的伪元素：before和：after获得指向三角形，但border-radius似乎创建了一条1px的白线，所以它不再是元素的其余部分。这在IE 8中工作正常，但现在在IE 11中被破坏。如果我删除border-radius，则伪元素三角形将再次与元素齐平。

示例2：

显示为内嵌块的<a>链接按钮具有背景的线性渐变，蓝色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>内的<div>元素左上角和右上角（显示）有边框半径。 IE 11在两个<div>元素之间显示1px间隙（如上面链接的其他海报线程中所示）。但如果底部{{1}}的边框半径设置为0，则间隙消失。

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

非常感谢任何帮助。

Answer 1

据我所知，IE11中有border-radius的错误。您描述的问题可能是整体情况的一部分。 More info

Answer 2

分数像素解决方法可能会导致Firefox将文本偏移1个像素，原因是它们采用像素对齐的方法来处理选择性字体大小的明细模糊。

this msdn thread（您发布的地方）中的溢出：隐藏包装解决方法可能不太容易出现类似的兼容性问题。

Answer 3

我认为你忘记了你的CSS中的锚标记重置属性。

其实IE自动采用1px边框，你必须在你的css img标签中写一个重置属性，一个标签边框：无

喜欢以下代码

img {border:none;outline:none}
a {border:none;outline:none}