伪内容属性在每个浏览器中有所不同答案

【问题标题】：pseudo content properies varies in each browsers伪内容属性在每个浏览器中有所不同
【发布时间】：2015-10-23 20:38:52
【问题描述】：

我正在使用自定义 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;
}

任何想法请在所有浏览器中使用相同的方式..

【问题讨论】：

我猜这与行高有关。
IE 9、10 和 11 在用于 :before 和 :after 伪元素 (connect.microsoft.com/IE/feedback/details/776744) 时的“line-height”属性中不支持 rem 单位。
还要检查你使用的是box-sizing:border-box。
我猜是行高问题，试试pixel而不是rem。
line-height 属性的值是无单位的，而且 0 也不需要单位。您可以查看现有示例，例如来自Filament Group 或我的前同事CreativeJuiz 的示例（法语，但代码应该足够了）。

标签： html css radio-button pseudo-element

【解决方案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

【讨论】：

任何需要的人都可以使用这个解决方案;)