Safari bug - 输入：使用两个控制它的标签进行检查

Question

我在使用输入开发的网站上进行了切换：选中并将标签作为切换。

HTML：

<input type="checkbox" id="expand-services" class="services">
<label class="expand-services" for="expand-services">
      <img src="img/icon-expand-services.png" alt="">
</label>

在下面的无序列表中：

<li><label for="expand-services">SERVICES</label></li>

CSS：

div.services {
    width: 100%;
    height: 1px;
    overflow: hidden;
    border-bottom: 1px solid #AAA;
    background: url("../img/bg-services.png") repeat;
    -o-transition: all .5s;
    -ms-transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
}

input.services:checked ~ div.services {
    height: 125px;
}

input.services:checked ~ label img {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);  
    -o-transform: rotate(180deg);
}

所以这在每个浏览器中都很有效。单击任一标签检查（或取消选中）隐藏的复选框，并将div.services的高度更改为125px或更改为0px，并将标签img（简单箭头）从指向上方向下旋转。

仅在Safari中，当我点击其中一个标签时，效果很好。只要我坚持那个标签。如果我之后单击其他标签，则只有img会旋转。 div.services的高度不再受影响，即使我之后再次单击该原始标签。每个其他浏览器，两个标签都很棒。请参阅下面的图像作为参考。

希望我的问题有道理。

图片参考：

知道我失败了吗？

Answer 1

如果Safari窗口出现问题，您可能会尝试使用单个label并从中生成伪元素。

您需要使用不同的方法调整一些内容，例如使用inherits值在伪元素上应用转换以修复Safari的另一个错误

测试此codepen并查看是否值得使用它的某些部分：http://codepen.io/gc-nomade/pen/LKqJF

Answer 2

这应该有所帮助：

<input type="checkbox" id="expand-services" class="services">
<div class="fuck-safari">
 <label class="expand-services" for="expand-services"></label>
 <img src="img/icon-expand-services.png" alt="">
</div>    

我在IE中遇到同样的问题。