테두리 반경은 IE에서만 작동하지만 다른 브라우저에서는 작동하지 않습니다.

Question

아래는 CSS 클래스입니다. 테두리 반경 및 패딩이있는 IE에서는 정상적으로 작동합니다. 그러나 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 fiddle이나 다른 좋은 사례를 제공 할 수 있습니다.

에서 모든 브라우저에서 작동해야

어쨌든 국경 radious :

• + IE 9
• + 파이어 폭스 4
• + 크롬 5
• + 사파리 7
• + 오페라 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%; 
} 

이 작동하고, 그래서 당신은 아마 코드의 다른 덩어리가이 부분을 충돌하고, 우리에게 더 좋은 샘플을 제공하지 않는 경우에 우리는 더 많은 당신을 도울 수 있습니다.