IE11边框半径和边框错误问题

Question

我在IE11中遇到了一个奇怪的视觉错误，您可以在此处的图像中看到：

_{（来源：jonwallacedesign.biz）}

请查看白色“WHY USE US”li按钮角落的奇怪效果...

组合使用border-radius、background-image和border: 1px solid #color似乎会产生这种奇怪且可怕的效果。

有人知道解决方法吗？

LI的CSS如下：

background-image: url("../images/core/primnavItemBG_sprite.png");
background-position: 0 0;
border: 1px solid #FFFFFF;
border-radius: 6px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
color: #2062AF;
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-size: 14px;
margin-right: 5px;
outline: medium none;
overflow: hidden;
text-decoration: none;
text-transform: uppercase;

- dubbs

---

自从IE首次添加了对border-radius的支持后，我已经偶尔注意到这点。 - moribvndvs

也许这个链接可以帮到你：https://dev59.com/AXzaa4cB1Zd3GeqPUccU#21935662?noredirect=1#comment33227979_21935662 - Paulie_D

为什么你使用带有实际图像的 background-image 而不是 CSS3 渐变？ - Bram Vanroy

我也在Windows 10上的IE11和Microsoft Edge中遇到了这个问题。然而，在Windows 8.1上的IE11中，我无法复现此问题。我使用的是纯色背景，没有花哨的渐变或其他任何东西。 - Bryan Corey

@BryanCorey，我也在Win10上的IE11中遇到了这个问题。Edge似乎可以正常工作。这个问题出现在我的整个应用程序中，无论是实心填充还是1-2像素边框（方框、输入等都表现出这种情况）——非常烦人。你解决了吗？ - Dave

Answer 1

这对我很有效。我不确定你是否有和我一样的问题。我发现在角落周围会出现轻微的白色边框。

background-clip: padding-box;

将背景裁剪为内边距框，这个属性用于描述元素背景的绘制区域。

- Nee Lu

Answer 2

解决方案：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<style>
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
</style>

- kavita

Answer 3

请尝试将此代码放入条件 CSS 区块中。

background-image: url("../images/core/primnavItemBG_sprite.png");
border: 1px solid #FFFFFF; /*In Border color use color same as background color otherwise use border-size:0*/
box-shadow: none;
outline: none;

希望这能解决你的问题。

- Optimum Creative

Answer 4

为什么不使用http://css3buttongenerator.com/来重新创建此按钮，而不是使用背景图像，以节省任何额外的请求和加载时间。我能够在IE 11中使用上述生成器成功地重新创建您的按钮和渐变。附上图片; 按钮图片

- Kapeesh Manilal

Answer 5

您可以通过在头部添加<meta http-equiv="X-UA-Compatible" content="IE=10" />来启用IE10模式，并且可以正常工作。

- Abramova

---

这个答案比你的早了将近20分钟。 - Asons

Answer 6

在IE10中添加一个实心背景颜色并修复了这个问题...似乎是IE尝试渲染CSS3位的一个bug...

- dubbs

---

我有完全相同的问题，但我的按钮已经使用纯色背景。我在每个使用 border-radius 的元素左侧看到了奇怪的线条。你的修复代码是什么？ - jhned

我也遇到了一个实心背景的相同问题。如果有解决方案，我也不介意看一下。 - freshyill