1

私はIE7が嫌いです、それは私を病気にします。これについて助けが必要です。おそらく私は何か間違ったことをしている、または...

これは私のcssです：

input[type='checkbox'] 
{
    opacity: 0;
    float: left;
    width: 18px;
}
input[type='checkbox'] + label {
    margin: 0;
    clear: none;
    padding: 5px 0 4px 24px;
    /* Make look clickable because they are */
    cursor: pointer;
    background: url(https://css-tricks.com/wufoo/themes/customradiosandcheckboxes/off.png) left center no-repeat;
}

input[type='checkbox']:checked + label {
    background-image: url(https://css-tricks.com/wufoo/themes/customradiosandcheckboxes/check.png);

html:

<input id="Field2" name="Field2" type="checkbox" class="field checkbox" checked="checked">
<label class="choice" for="Field2">First Choice</label>
<br><br>
<input id="Field3" name="Field3" type="checkbox" class="field checkbox">
<label class="choice" for="Field3">Second Choice</label>
<br><br>
<input id="Field4" name="Field4" type="checkbox" class="field checkbox">
<label class="choice" for="Field4">Third Choice</label></body>

IE9 ビュー:

ここに画像の説明を入力

IE7 & IE8

ここに画像の説明を入力

このウェブサイト「 http://selectivizr.com/」の詳細については、「selectivizr.js」で動作するはずだと誰かが言っていることがわかりました。

私は彼らが示したようにしました：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.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]-->

これで問題は解決しませんでした。

誰かが試してみたいなら、私はこのフィドルを作成しました! http://jsfiddle.net/6mUWk/

4

3 に答える 3

2

IE は:checked、バージョン9以降の疑似クラスをサポートしています。JavaScript を使用してチェック フィールドの状態を追跡し、スタイルを通常のクラスに適用します。

または、古い IE7/8 で通常のフォーム コントロールを使用しながら、IE9+ 専用のカスタム フォーム コントロールを使用します。このような IE バージョンの分離は、たとえば、条件付きコメントを使用して実現できます。

于 2013-03-20T19:10:41.297 に答える
0

試してくれた皆さん、ありがとう！

ただし、これまでの最善の解決策は、jQueryの助けを借りてこれだけだと思います：

https://code.google.com/p/jquery-checkbox/

シンプルでピュアクリーンです!!!

私はそれをテストし、必要なすべてのブラウザーをサポートしています!

于 2013-03-20T20:57:08.243 に答える
-1

ケビンのコメントは正しいです。SELECT、RADIO、および CHECKBOX は、標準の HTML 要素のようには動作せず、むしろプラットフォームに依存します。XP のチェックボックスは、Win7 または MACOS のチェックボックスとは異なります。

非表示のフォーム フィールドを使用し、やりたいことに JavaScript ベースの代替を使用することを検討することをお勧めします。

基：divによるjquery selectチェックボックス

$(function() {
     $('.someWrapper').toggle(
       function(event) {
         $(this).find('input').prop('checked', true);
       },
       function(event) {
         $(this).find('input').prop('checked', false);
       }
     );
 });
于 2013-03-20T19:08:13.590 に答える