IE10中的Checkbox CSS3

Question

我有一个checbox，想要添加CSS3风格。在所有浏览器都可以，只在IE中有问题。

JSFiddle：http://jsfiddle.net/GmuMn

当我点击IE中的复选框未选中复选框时，但单击“附近”即可。在其他浏览器中一切正常。

HTML：

<li>
<label>
<input type="checkbox" value="1" name="lorem">
<span>
<label></label>
</span>
lorem
</label>
</li>

CSS：

input[type="checkbox"] {
    visibility: hidden;
    margin: 0;
    margin-right: 10px;
}
input[type="checkbox"] + span {
    width: 16px;
    height: 16px;
    background: #c8c8c8;
    position: absolute;
    left: 0;
}
input[type="checkbox"] + span label {
    background: white;
    cursor: pointer;
    position: absolute;
    width: 12px;
    height: 12px;
    left: 2px;
    top: 2px;
}
input[type="checkbox"] + span label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    width: 7px;
    height: 4px;
    background: transparent;
    top: 2px;
    left: 2px;
    border: 2px solid #fcfff4;
    border-top: none;
    border-right: none;

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
input[type="checkbox"] + span label:hover::after {
    border-color: black;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.3;
}
input[type="checkbox"]:checked + span,
input[type="checkbox"]:checked + span label {
    background: #3b79ad;
}
input[type="checkbox"]:checked + span label:after {
    border-color: white;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}