Question

我有以下用于在页面上绘制圆圈的css代码。

.full-circle {
 background-color: rgba(204, 0, 102, 0);
 border: 3px solid #333;
 margin: auto;
 height: 75px;
 width: 75px;
 -moz-border-radius:75px;
 -webkit-border-radius: 75px;
 }

它被称为：

 <div class="full-circle">

在Firefox中工作得很好，但是当我在IE中运行时，它显示为正方形，我不知道为什么。

Answer 1

马文在评论中指出了这一点，但这是你问题的答案：你没有指定正常的border-radius。此外，如果您要创建一个圈子，则需要50%，而不是75px。 75px可能会使您的特定div成为一个圆圈，但如果您决定使width更宽，则会有不同的呈现方式。你的CSS应该是这样的：

.full-circle {
   background-color: rgba(204, 0, 102, 0);
   border: 3px solid #333;
   margin: auto;
   height: 75px;
   width: 75px;
   border-radius:50%;
}

编辑：正如Rob指出的那样，除非您为使用旧浏览器的用户群设计网站，否则您可能甚至不需要-moz和-webkit前缀。我从示例中删除了它们。

Answer 2

正如Rob的评论所述，大多数浏览器都有no need for vendor prefixes since 2010，只需添加

border-radius: 75px;

IE8不支持此属性，IE9在没有-ms-前缀的情况下支持它。

但请查看@ Vector的回答，您应该使用%而不是px

圆圈在IE

2 个答案: