javascript - 无法在 Safari 中的 CSS 中设置标签标签的宽度

Question

我有以下 HTML

<input type="checkbox" asset="AAA" name="assets[AAA]" value="AAA" id="assets[AAA]" class="c_green" checked="checked">
<label for="assets[AAA]"></label>

在 CSS 我有

input[type=checkbox].c_green {
    display:none;
}
input[type=checkbox].c_green+ label:before {
    content:"";
    display: block;
    width:1em;
    height:1em;
    border: 2px solid #66BC29;
    text-align: center;
    line-height:1em;
}
input[type=checkbox].c_green:checked + label:before {
    content:"\2713";
    display: block;
    font-size:1em;
    color:#66BC29;
}

value=""之后，如果复选框未选中 ( ) 且不可见，则在 safari 绿色标签（在隐藏复选框之后绘制）没有宽度。在 Chrome 和 FF 中仍然一切正常。

我们在上面的 CSS 中做错了什么？

Answer 1

代替display: block尝试使用display: inline-block for label

在 CSS 中

input[type=checkbox].c_green {
     display:none;
}
input[type=checkbox].c_green+ label:before {
     content:"";
     display: inline-block;
     width:1em;
     height:1em;
     border: 2px solid #66BC29;
     text-align: center;
     line-height:1em;
}
input[type=checkbox].c_green:checked + label:before {
     content:"\2713";
     display: inline-block;
     font-size:1em;
     color:#66BC29;
}