Question

我在IE环境中遇到了样式问题。当我使用border-radius制作div圆时，圆div的边框不像chrome或firefox那样平滑。

以下是我使用的代码

HTML

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

CSS

填充顶部：60％在放置背景图像时使div成为正方形。

.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在IE浏览器中流畅？

**更新** 由于@LGSon正在询问样本图像，所以这是正在发生的事情

IE noises

Answer 1

这是IE中的一个错误。最安全的方式（但不是最简单的方法）是使图像自己成为圆形。另一个解决方案是尝试使用浏览器特定的黑客攻击，但这非常不安全。

如果可能的话，我建议转换为像PNG这样的图像结构，它允许透明，然后使图像变成圆形。

IE：border-radius与背景不平滑

1 个答案: