Question

好的，所以这是第一次 - 我的CSS在所有经过测试的浏览器中工作......除了Chrome。

我试图在div中渲染一个简单的圆圈。

例如：http://redappledev2.wpengine.com/标题右上角的登录图标（带有用户图像的圆圈）。

在Firefox，IE，Safari中，圆圈呈现为典型的圆圈。当前的css是：border-radius: 25px;但是当css为border-radius: 50%;

时也会出现预期的结果

从我可以查看 - 看起来在Chrome中的问题是父容器 - 一个A标签 - 高度是基于它的字体大小 - 当前20px 。字体大小无法增加，但在测试时我增加了大小 - 标签的高度增加，圆形边框呈现为真圆而不是日食。

我错过了什么吗？有没有更好的方法在用户图标周围呈现圆形边框？

谢谢！

Answer 1

如果您将div.icon-circle从display:inline更改为display:inline-block，就会开始按照您的意图开始显示。

我刚刚使用DOM检查器调整了一些样式，并使用以下样式规则得到了一个圆圈：

.icon-circle{
   border:1px solid #627F9A;
   border-radius: 25px;
   display: inline-block;
   padding: 0px 5px 2px 4px;
   position: relative;
   top: 2px;
 }

祝你的网站好运

CSS Circle在每个浏览器中工作 - 除了Chrome

1 个答案: