Question

我正在尝试为我的网站创建自定义复选框，它可以与＆gt; 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以备回复：检查伪选择器在IE8 / 7中工作，但问题是，当我点击复选框时，似乎没有发生任何事情的状态复选框甚至onclick事件都没有被捕获。任何帮助将不胜感激。

Answer 1

像Nasheman所说，这将是一个z指数问题。对于跨浏览器自定义复选框，我个人使用此插件jquery：http://fronteed.com/iCheck/

Answer 2

这很有可能。我在两个小时内创建了它们。告诉我它是否有效。我还没有对它们进行过测试，因为我没有旧的版本可用。

单选按钮： 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=AFQjCNG4Tfz0XYteFZAz8Q53OXSevujfNg

IE8 / IE7中的自定义复选框

2 个答案: