IE:带有背景的边界 - 拉迪乌斯不是光滑的



我在IE环境中有一个样式问题。当我使用Border-Radius制作一个Div圆圈时,Circle Div的边框并不像Chrome或Firefox Show一样光滑。

以下是我使用的代码

html

<div class="col-sm-4">
    <div class="circle-images"></div>
</div>

CSS

填充式:60%在您放置背景图像时制作Div Square。

.circle-images{
   width:60%;
   padding-top:60%;
   border-radius: 60%;  
   margin-right: auto;
   margin-left: auto;
   background: url("some/path/to/jpg") no-repeat center center;
   background-size:contain;
 }

我也尝试了这种样式。边界比没有边界的边界更光滑,但边界上有很多声音。

.circle-images{
  width: 60%;
  padding-top:50%;
  border-radius: 60%;
  border: 27px solid #EAEAE4;
  margin-right:auto;
  margin-left:auto;
  background: url("some/path/to/jpg") no-repeat center center;
  background-size:contain;
}

有什么办法使边界像IE中的Chrome一样光滑?

**更新**由于@lgson在询问示例图像,这是发生的事情

IE噪声

这是IE中的错误。最安全的方法(但最简单)是使图像自我循环。另一个解决方案是尝试使用特定于浏览器的黑客,但这是非常不安全的。

如果可能的话,我建议转换为允许透明度的PNG这样的图像结构,然后使图像循环。

最新更新