Question

下面是我正在使用的CSS类。它在IE中使用border-radius和padding工作得很好。但是在Mozilla和其他浏览器中工作也不行。从两天开始可以帮助我吗？

.node-tl-img-with-circle {
        /* become base of .circle::after */
       /* position: relative;*/
         -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        /* width and height are depend on the icon size */
        width: 40px;
        height: 40px;


        /* color of circle */
        /*background-color: #F4B272;*/

        /* make div circle */

        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;

      padding:8px;

       /*margin: 5px;*/

        /* The outermost stroke is as same as background color */
        /*border: 4px solid #FFF;*


        /*box-shadow:0 0 0 2px #F4B272; 
        -moz-box-shadow: 0 0 0 2px #F4B272; 
        -webkit-box-shadow:0 0 0 2px #F4B272; */
    }

Answer 1

首先，你可以在codepen小提琴或其他东西下次提供一个好的样例。

无论如何，border-radious应适用于以下所有浏览器：

+ IE 9
+ Firefox 4
+ Chrome 5
+ Safari 7
+ Opera 11.5

see in caniuse.com

HTML

<div class="sample"></div>

CSS

.sample {
  box-sizing    : border-box;
  width         : 40px;
  height        : 40px;
  padding       :  8px;
  border        :  4px solid red;
  border-radius : 50%;
}

这是有效的，所以如果您没有为我们提供更好的示例，我们无法帮助您，可能其他一大块代码正在崩溃这部分。

Border Radius仅在IE中工作，但在其他浏览器中不起作用

1 个答案: