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 により、IE8 および IE9 を使用する 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 に答える