1

ページにmodernizrを含めましたが、それらのブラウザーにアクセスできない場合、IE 6-7で動作することをどのようにテストしますか？次のようなことを行う：http： //designshack.net/articles/css/build-a-freaking-awesome-pure-css-accordion/

重要なCSS：

    .accslide {
     height: 0px;
     width: 0px;
     overflow: hidden;
    }
    input[type="radio"]:checked+label ~ .accslide {
     width: 100%;
     height:auto;
    }

その2番目のセレクターが起動しない場合、コンテンツは非表示になります。

CSS3がサポートされていない場合にのみModernizrをロードする方法はありますか？ModernizrがCSSセレクターで動作しているかどうかをテストするにはどうすればよいですか？

4

2 に答える 2

1

指定されたブラウザーがCSS機能をサポートしていない場合、ModernizrはCSS機能（新しいセレクターなど）を有効にしません。これは主に機能検出ライブラリです。

于 2013-02-21T23:12:07.670 に答える
1

Modernizrはブラウザに機能を追加せず、既存の機能をチェックするだけです。セレクターのサポートをテストする場合は、それを追加する必要があります。ここに要点があります

ただし、それでも、達成しようとしていることを達成することはできません。accslideこれは、ラジオボタンをチェックしたときに要素が表示されていることを想像しています。IE6と7をサポートする予定の場合は、おそらくjavascriptを使用する必要があります。IE6は[type="radio"]セレクターもサポートしていないため、これも使用できません。

ラジオボタンにクリック/変更ハンドラーを追加し、クラスでコンテナーを更新して、特にIE6をサポートするために、目的の機能を適切に取得する必要があります。

CSSがどのように見えるかの例を次に示します。

#radioContainer .accslide {
 height: 0px;
 width: 0px;
 overflow: hidden;
}
#radioContainer.on .accslide {
 width: 100%;
 height:auto;
}

さて、javascriptでは、誰かがラジオボタンをクリック/変更したときに、要素onにクラスを追加/削除するだけです。注：#radioContainerにIDを指定しましたb / c IE6は2つのcssクラス名の要素のスタイルを設定しません（最終的には、IE6をサポートせず、単に提供することができますが、IE6では機能しません）#radioContainer.radio-container.on

于 2013-02-21T23:24:11.070 に答える