我在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这样的图像结构,然后使图像循环。