1

基本上在表格中当你点击图片时，也应该勾选这个框。这适用于除 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>
4

2 回答 2

2

似乎 IE < 9 不喜欢标签中的子节点（非输入）。一种解决方法是将图像设置为标签的背景并制作标签，inline-block以便您可以设置其大小。在 IE8 中测试http://jsfiddle.net/K9FEk/8/

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>
于 2012-12-13T22:38:47.853 回答
1

不知道问题是什么，但这个 CSS 使它在使用 IE9 的 IE8 和 IE7 模式下为我工作。

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

演示：http: //jsfiddle.net/K9FEk/3/

这可能是因为图像在页面上的空间超出了display:inlinestyled <label>，或者它在标签“上方”，劫持了点击事件。

于 2012-12-13T21:19:57.757 回答