содержания псевдо варьируется в Недвижимости Болгарии Недвижимости в каждых браузерах

Question

Я использую пользовательский CSS в коробки радио стиля, но теперь проблема в том, что

проверил радио круг появляется на позициях дифф в IE11, FF36 и Chrome. Ниже приводится иллюстрация

CSS используется для достижения этой цели является, как показано ниже:

label { 
    display: inline-block; 
    cursor: pointer; 
    position: relative; 
    padding-left: 32px; 
} 

input[type=radio] { 
    display: none; 
} 

label:before { 
    content: ""; 
    display: inline-block; 
    width: 23px; 
    height: 22px; 
    margin-right: 10px; 
    position: absolute; 
    left: 0; 
    border:1px solid $grey; 
    border-radius: 50px; 
} 

input[type=radio]:checked + label:before { 
    content: "\25CF"; 
    border:1px solid $light-blue; 
    color: $light-blue; 
    font-size: 26px; 
    text-align: center; 
    line-height: 0rem; 
    padding-top: 7px; 
} 

Любые идеи, пожалуйста, чтобы работать это одинаково во всех браузерах ..

Answer 1

Я изменил подход. Вместо того, чтобы использовать содержание и высоту строки, я переключился ниже

label:before { 
content: ""; 
display: inline-block; 
width: 20px; 
height: 20px; 
margin-right: 10px; 
position: absolute; 
padding:1px; 
left: 0; 
border:1px solid black; 
border-radius: 50px; 
} 

input[type=radio]:checked + label:before { 
border:1px solid blue; 
background-color:blue; 
box-shadow: 0 0 0 3px #fff inset; 
width: 20px; 
height: 20px; 
} 

JS Fiddle