Html 如何使复选框在IE7和IE8中工作

基本上在表单中单击图像时，也应选中该框。这在除IE7和IE8之外的所有浏览器中都适用。有人有什么想法吗

<form>
<input type="checkbox" name="interest1" id="interest1" value="x">
<input type="checkbox" name="interest2" id="interest2" value="x">
<input type="checkbox" name="interest3" id="interest3" value="x"></p>   
<p align="center"><label for="interest1"><img src="/images/interest1.jpg" width="152" height="152" alt="" /></label>
<label for="interest2"><img src="/images/interest2.jpg" width="152" height="152" alt="" /></label>
<label for="interest3"><img src="/images/interest.jpg" width="152" height="152" alt="" /></label></P><!-- code making checkbox be an image-->
</form>

不确定问题出在哪里，但这个CSS让我在IE8和IE7模式下使用IE9工作

label {
    display:inline-block; /* "block" would also work */
}
img {
    position:relative;
    z-index:-1;
}

演示：

---

这可能是因为页面上的图像空间正在扩展到

显示：内联
样式
，或者图像位于标签的“上方”，劫持了点击事件。
IE<9似乎不喜欢标签中的子节点（非输入）。解决方法是将图像设置为标签的背景，并使标签成为
内联块
，以便可以设置其大小。在IE8中测试

CSS

label {
    border:1px solid red;
    display:inline-block;
}

#label-interest1 {
    background-image: url(http://www.gravatar.com/avatar/36fa212d5215d9f282033375834ba0c0?s=120&d=identicon&r=PG);
    width: 152px;
    height:152px;
}

HTML

<form>    
  <input type="checkbox" name="interest1" id="interest1" value="x">        
  <p align="center">    
    <label id="label-interest1" for="interest1"></label>
  </p>
</form>




我可以使用IE8和IE7模式在IE9中确认这一点。您是否尝试将
alt
文本添加到图像中？（无论如何，对于屏幕阅读器用户来说，你应该这样做。）添加alts不会改变任何东西，但是一个很好的发现——这对我来说在第7章是有效的，但在第8章中就没有那么好了。有什么提示吗？啊，你是对的，IE8还是会崩溃。让我试试。。。编辑：该死，我无法为IE8找到它-当我悬停时，复选框会亮一点，但单击图像什么也不做。对不起，我得走了，我暂时把这篇文章留在这里，以防有人知道。