Question

我试图在IE 10中设置一个不起作用的border-radius，但在IE 9中可以正常工作。问题是当我只为图像的左上角定义一个半径时，图像不是在边界半径周围修剪。

BAD：

<img style="border-radius: 14px 0px 0px 0px" alt="" src="">

现在，如果我向右上角或左下角添加第二个边界半径，则应用左上半径。

GOOD：

<img style="border-radius: 14px 1px 0px 0px" alt="" src="">

此URL演示了此问题，并为不使用IE 10的用户添加参考图像。

更新9月30日：我在Connect网站上收到了微软的回复，他们确认他们能够重现这个问题并进一步调查。

Answer 1

我刚刚遇到了同样的问题，在图像上没有在IE 10中应用圆角。最初我有这个：

border-radius: 45px 0 45px 0;

结果没有任何边框，更改0边框半径之一使我的边框半径再次出现。

最后我应用了这种风格：

border-radius: 45px 0.1px 45px 0.1px;

在其他浏览器中没有任何副作用，但我在IE 10中有回圆角

Answer 2

尝试border-top-left-radius: 14px。

Answer 3

据我所知，大多数浏览器都不允许您剪切带有圆形边框的图像。（即使IE10确实在其他浏览器中看起来很奇怪）。最简单的解决方案是使用嵌套div并将图像设置为背景：

HTML

<div class="imageborder">
  <div id="image1"> </div>
</div>

CSS

.imageborder {
  border-radius: 5px;
}
#image1 {
  background-image: (yourimage);
}

您可能需要手动设置div的高度才能显示。