2

私のウェブサイトプロジェクトでは、メディアクエリとn番目の子セレクターを使用しています。

IE8はそのままではサポートしていませんが、役立つポリフィルがあります。

私の問題は、メディアクエリ内でn番目の子を使用する必要があることです。総合的な例： 

@media (min-width: 500px) {
  .foo:nth-child(2n) {
    color: pink;
  }
}

IE8で動作するには、このコードが必要です。

問題は、selectivizrもie9.jsもnth-childメディアクエリ内を解析せず、メディアクエリを有効にするポリフィルは、nth-child一緒に使用するとポリフィルに干渉するため、役に立たないことです。

そのコードをIE8で機能させる方法を提案してください！

4

3 に答える 3

5

さて、私はそれを理解しました。

SelectivizrとRespondは両方とも、連携して動作するように変更されています（1、2 ）。

問題は、必要な変更がSelectivizrバージョン1.0.3bにコミットされていることです。2013年3月現在、1.0.3bはリリースされていません。Selectivizrの公式ウェブサイトでもCDNでも利用できません。これはプロジェクトのリポジトリからのみ取得でき、現在は非圧縮版のみが利用可能です。

リリースでは応答がより迅速になるため、最新の公式バージョンで十分です。

Selectivizrを最初に含め、次に応答する必要があることに注意してください。そして、Selectivizrの前にSelectivizrの要件の1つを含めることを忘れないでください！したがって、正しい順序は次のとおりです。

  1. NWMatcher（または代替）
  2. Selectivizr
  3. 応答

また、 IE9.jsは使用しないでください。メディアクエリの独自の実装があり、Respondと一緒に使用すると、IE<9でサイトを使用できなくなります。

于 2013-03-23T19:09:38.820 に答える
2

IE8はメディアクエリをまったくサポートしていないため、コードはIE8では機能しません。IE8でメディアクエリが必要な場合は、それを可能にするポリフィルを見つける必要があります。

メディアクエリとセレクターポリフィルを組み合わせることで、同じページで使用できるようになります。これらは通常、相互に干渉しないように記述されているためです。

編集ポリフィルが実際に相互に機能しない場合は、IE8のメディアクエリサポートが必要であると考える理由を真剣に検討します。たぶん、IE8に独自のことをさせるだけで、いくつかの調整を加えるだけで大​​丈夫でしょう。IE8はWindowsXPと一部のWindowsVistaマシン（Win7はIE9に同梱）にのみ存在し、Windows Phoneの市場は非常に小さいため、IE8ユーザーは非常に大きな画面や非常に小さな画面を表示しない可能性が非常に高くなります。モバイル分野で共有します。チャンスは、あなたはほとんど戻ってこないために多くの努力をしているということです。

ただし、何らかの理由でIE8のメディアクエリタイプのサポートが必要な場合は、ウィンドウサイズを検出し、それに応じてクラスを適用する、より基本的なJavaScriptオプションを検討します（これはバニラでもかなり簡単なはずです） JSですが、ほとんどのライブラリではこれがさらに簡単になっています）。JavaScript参照を条件付きコメントでラップして、他のすべてのブラウザーからサンドボックス化することができます。

于 2012-11-27T16:15:21.393 に答える
1

現在も同じ問題に悩まされており、この作業を行うためにいくつかのアイデアを試してみるのに忙しいです。

動作しているように見えるハックの1つは、selectivizr.jsのすべての関数をグローバルレベルに引き出すことです（変数もグローバルに宣言する必要があります）。次に、css-mediaqueriesを変更して、メディアクエリの内容を使用してpatchStyleSheetを呼び出してから、スタイルに追加できます（次のバージョンのcss-mediaqueries.jsの916行目）。

styles[styles.length] = cssHelper.addStyle('@media ' + s.join('') + '{' + patchStyleSheet(mql.getCssText()) + '}', false);

したがって、これが理想的な解決策であるとは言えません-selectivizrのすべての関数と変数をグローバルレベルで宣言することは明らかに最善のアイデアではありません-しかし、それは機能しているようであり、それが可能であることを証明しています。もう少し時間があれば、おそらく2つのスクリプトを組み合わせてはるかに優れたソリューションにすることができます。

于 2012-11-29T12:45:59.443 に答える