IE 11 边界半径怪异（在 IE 9 和 IE 10 中未发生）

Posted 2023-03-06

【中文标题】IE 11 边界半径怪异（在 IE 9 和 IE 10 中未发生）

【英文标题】：IE 11 border-radius weirdness (did not occur in IE 9 and IE 10)

【发布时间】：2013-12-01 20:08:21

【问题描述】：

我已经在 IE 11 中搜索了与边界半径相关的类似问题，但only one found on the Microsoft IE Developer site 描述了自“升级”到 IE 11 以来我目前也遇到的情况。该线程中帖子的答案是确定DOCTYPE 是 html5，而不是 Quirks。

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

示例 1：

我在这里有一个border-radius: 5px 0 0 5px，然后应用单独的伪元素 :before 和 :after 来获得尖三角形，但边框半径似乎正在创建一条 1px 的白线，因此它不再与其余部分齐平的元素。即使在 IE 8 中也可以正常工作，但现在在 IE 11 中已损坏。如果我删除边框半径，伪元素三角形会再次与元素齐平。

示例 2：

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

示例 3：

三个<a> 链接元素在<div> 内设置为display: inline-block，相对于它下方的另一个<div>。底部<div> 有一个border-radius: 4px，而顶部<div> 内的<a> 元素在左上角和右上角都有边界半径（如图所示）。 IE 11 在两个 <div> 元素之间显示 1px 的间隙（如上面链接的其他海报线程中所示）。但是如果底部<div>的border-radius设置为0，间隙就消失了。

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

任何帮助将不胜感激。

【问题讨论】：

欢迎来到本站。您有例如 3 的图像吗？如果是这样，请留下带有 URL 的评论，我会为您将其插入问题中。你还提到了别人的帖子，你能把它也链接在这里吗？

当然，这里是示例 3 的图像：i5.photobucket.com/albums/y162/jrob007/… 并且指向 Microsoft Dev 站点帖子的链接是 social.msdn.microsoft.com/Forums/ie/en-US/…

你做了什么来修复它？这是否与在 IE11 上呈现的所有圆角上出现白色像素有关？

这显然是 IE11 中的一个错误，后来在我在帖子中链接的 Microsoft IE Developer 论坛主题中得到其他用户的证实。目前的解决方案是子像素指定。在示例 1 的情况下，我将三角形偏移了right:-19px;，它在除 IE11 之外的所有浏览器中都显示得很好（如上所示）。解决方案是使其成为right:-18.99999px;，它似乎在这种情况下有效。

@jrob007 很好的解决方法，对我有用（但我确实 left:99.9999% 用于三角形位置）。请做出“答案”，以便人们注意到它。

【参考方案1】：

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

【参考方案2】：

小数像素变通方法可能导致 Firefox 将文本倾斜 1 个像素，因为它们的像素对齐变通方法会导致选择性字体大小中的 cleartype 模糊。

this msdn thread（您发布的位置）中的 overflow:hidden wrapper 解决方法可能不太容易出现类似的兼容性问题。

【参考方案3】：

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

其实IE自动取1px边框，你必须在你的css img标签中写reset属性，一个标签border:none

喜欢下面的代码

img border:none;outline:none
a border:none;outline:none