IE：邊框半徑與背景不平滑

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中的Chrome一樣使邊框更平滑？

**更新**由於@LGSon正在詢問示例圖像，所以這是正在發生的事情

IE噪音

Answer 1

這是IE中的錯誤。 最安全的方法（但不是最簡單的方法）是使圖像自己變成圓形。 另一個解決方案是嘗試使用特定於瀏覽器的黑客，但這是非常不安全的。

如果有可能，我建議您轉換為允許透明的PNG之類的圖像結構，然后使圖像變為圓形。