Safari 7.1 CSS兄弟选择器的问题

Question

我使用Bootstrap插件awesome-bootstrap-ckeckbox,我也在使用ASP.NET MVC,然后我的所有复选框都呈现两个输入,一个作为复选框输入,另一个作为隐藏输入,因为我修改了CSS选择器,例:

HTML代码

<div class="checkbox">
   <input id="checkbox1" type="checkbox">
   <input type="hidden" />
   <label for="checkbox1">
      Default
   </label>
</div>
<div class="checkbox checkbox-primary">
   <input id="checkbox2" type="checkbox" checked>
   <input type="hidden" />
   <label for="checkbox2">
       Primary
    </label>
 </div>

CSS代码

/* awesome-bootstrap-checkbox */
.checkbox input[type="checkbox"]:checked + label::after {
  font-family: 'FontAwesome';
  content: "\f00c"; 
}
.checkbox input[type="checkbox"]:disabled + label::before {
    background-color: #eeeeee;
    cursor: not-allowed; 
}
.checkbox-primary input[type="checkbox"]:checked + label::before {
    background-color: #428bca;
    border-color: #428bca; 
}
.checkbox-primary input[type="checkbox"]:checked + label::after {
    color: #fff; 
}

/* my own version */
.checkbox input[type="checkbox"]:checked + input + label::after {
  font-family: 'FontAwesome';
  content: "\f00c"; 
}
.checkbox input[type="checkbox"]:disabled + input + label::before {
    background-color: #eeeeee;
    cursor: not-allowed; 
}
.checkbox-primary input[type="checkbox"]:checked + input + label::before {
    background-color: #428bca;
    border-color: #428bca; 
}
.checkbox-primary input[type="checkbox"]:checked + input + label::after {
    color: #fff; 
}

这在除了Safari 7.1之外的所有现代浏览器中都很有效,令人难以置信的是原始作品,但我的修改不是,我认为问题在于兄弟选择器.任何的想法？？？

Plunker代码:示例

Answer 1

这是Safari(不确定Safari 8)和旧版Chrome的已知错误.有几个解决方法,但我已经在实践中使用的只是替换+与~组合子:

.checkbox input[type="checkbox"]:checked ~ input ~ label::after

此处还有解决相同错误的其他问题:

• 带有`:hover`和多个相邻兄弟选择器的Webkit bug
• CSS邻近兄弟选择器,Safari和<nav>元素