IE8 / IE7 中的自定义复选框

Question

我正在尝试为我的网站创建自定义复选框，它适用于 >IE9 和其他浏览器。 但它在 IE8 或 7 中无法按预期工作。这是我的 CSS

input[type="checkbox"] + label span {
  height: 13px;
  width:13px;
  display: inline-block;
  cursor: pointer;
  background: url("../img/icons.png") no-repeat;
  vertical-align: text-top;
  margin-right: 6px; 
  background-position: -57px -118px; 
}

input[type="checkbox"]:checked + label span{ 
background-position: -70px -106px; 
}

<input type="checkbox" id="chkbox1" value="1" onclick="alert('clicked');">
<label for="chkbox1"><span></span>Checkbox1</label>

它在最新的浏览器中运行良好，我下载了selectivizr.js以回退到:checked伪选择器以在 IE8 / 7 中工作，但问题是当我单击复选框时，复选框的状态似乎没有发生任何变化，甚至onclick事件没有被捕获。 任何帮助将不胜感激。

Answer 1

就像 Nash3man 说的那样，这可能是 z-index 问题。 Personnaly 跨浏览器自定义复选框我使用这个插件 jquery： http : //fronteed.com/iCheck/

Answer 2

很有可能这会奏效。 我在两个小时内创建了它们。 告诉我它是否有效。 我没有在 ie 中测试它们，因为我没有旧版本的 ie 可用。

单选按钮： https : //plus.url.google.com/url?q=https : //jsfiddle.net/www139/ba5jn2e6/19&rct=j&ust=1438272911487000&usg=AFQjCNGbnoaoAsY0eXLb8k0YBrO3wswiNQ

复选框： https ://plus.url.google.com/url ? q =https : //jsfiddle.net/www139/wpq6qjyf/76/&rct=j&ust=1438273369508000&usg=AFQjCNG4Tfz0XYteFZAz8Q53NOXSevujf