3

フォールバック css と js をロードできるように、modernizr を使用してメディア クエリのサポートを検出しています。しかし問題は、スタイル設定されていない html のフラッシュがあり、css が modernizr によって動的に読み込まれるときに css が適用されることです。

        Modernizr.load({
            test: Modernizr.mq('only all'),
            yep: ['test.js','/a/s/responsive-css/abcd.css'],
            nope: ['/a/s/xyz.css']
        });

このリンクを確認してください。 http://susheel3656.0fees.net/index_with_modenizr.html

4

3 に答える 3

0

head タグの先頭に Modernizr 初期化コードを配置してみてください。modernizr.js の前はあまりロードされていないように見えましたが、試してみる価値があるかもしれません。

これがうまくいかない場合は、回避策としてページ コンテンツを非表示にし、css が読み込まれるときに jQuery を使用してコンテンツを表示します。

于 2013-03-16T20:15:13.757 に答える
0

Respond.jsまたはCSS3- MediaQueries.jsを使用して、(主に) IE7 および IE8 のメディア クエリ サポートを追加することを検討しましたか?

全員のレスポンシブ CSS をロードしてから、modernizr 呼び出しを次のように変更します。 

Modernizr.load({
        test: Modernizr.mq('only all'),
        yep: ['test.js'],
        nope: ['/js/respond.js']
 });

私はこのアプローチでいくつかの良い成功を収めました。最悪のシナリオは、IE7 または IE8 のみを使用している訪問者が、スタイル設定されていないコンテンツでフラッシュする可能性があることです。

古いブラウザでさらに微調整が必​​要な場合は、条件付きコメントをページ ヘッドに含めたり、ie タグを追加したり、js スクリプトをロードしたりできます。最後に、CSS にブラウザ固有の追加の CSS を含めることができます。

HTML

頭の中: [編集]

<script>
Modernizr.load({
        test: Modernizr.mq('only all'),
        yep: ['test.js'],
        nope: ['/js/respond.js']
 }); 
</script>    

<!-- load the responsive CSS for everyone -->    
<link rel="stylesheet" href="/a/s/responsive-css/abcd.css" type="text/css"/>  

<!--[if IE 7]>  
<html class="ie7">  
<script src="/js/ie7-script.js">    
</script>  
<![endif]-->

CSS
次に、CSS に追加します 

.ie7 .additional-selector{
/* Optional css specific to IE7 to compensate for old browser. Ideally this wouldn't be needed */
}

お役に立てれば！

于 2013-03-17T17:43:13.210 に答える