0

入力ラジオが IE7 でチェックされているときに、ラベルを強調表示する際に問題があります。

コードは非常にシンプルで、ここで見ることができます: JsFiddle

Javascriptを使用せずにIE7で動作させる必要があります。

HTML:

<ul>
    <li>
        <input id="yes" type="radio" name="name" title="yes" />
        <label for="yes">Yes</label></li>
    <li>
        <input id="no" type="radio" name="name" title="no" />
        <label for="no">No</label>
    </li>
</ul>​

CSS:

input[type="radio"]{
    position: absolute;
    left: -9999px;
}

label{
 background-color: yellow;
 border: 1px solid #777;
 cursor: pointer;
 float: left;
 margin-right: 10px;
 padding: 10px;
 width: 80px;
 height: 30px;   
}

input[type="radio"]:checked + label {
 background-color: green;
 color: #FFF;    
}
4

2 に答える 2

1

":checked" は IE 7 ではサポートされていません

于 2012-08-29T10:58:47.607 に答える
0

IE 7 は実際には CSS3 セレクターを実行しません。IE 7 に CSS3 サポートを提供するには、http ://selectivizr.com/ を使用する必要があります。

JS がなければ、これを達成することは不可能です。

以下を追加する必要があります。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->

サイトで IE7 :selector サポートを有効にします。

于 2012-08-29T10:58:47.617 に答える