6

IE 6/7/8でCSS3効果（border-radius、box-shadow ...）を取得するために、を使用してcss3pieいます。

ただし、css3piecss3-container (v1) / css3pie (v2)はDOMでいくつかのタグを生成するため、予想されるアーキテクチャが乱れます。次に例を示します。

CSS

pre {
    border: 1px solid #aaa;
    border-radius: 5px;
    behavior: url(pie.htc);
}

HTML

<div class="foo">bar</div>
<p class="getme">paragraph</p>
<pre>preformatted</pre>

jQuery

// undefined        expected: getme
alert($("pre").prev().attr("class"));

// css3-container   expected: p
alert($("pre").prev()[0].tagName);

// getme            expected: foo
alert($("pre").prev().prev().attr("class"));

// 4                expected: 3
alert($("body").children().size());

// will not set     expected: Impact
$("p+pre").css({fontFamily: "Impact"});

// it almost affects all such jQuery selctors

実際に生成されるソースは次のようになります。

<DIV class="foo">bar</DIV>
<P class="paragraph">paragraph</P>
<css3-container...>
    <border...>
        <shape...><stroke></stroke><stroke></stroke></shape>
    </border>
</css3-container>
<PRE>preformatted</PRE>

誰かがこの種の問題に遭遇したことがありますか？回避策はありますか？CSS3をIE6/7/8で動作させるためのcss3pieの代替手段はありますか？

4

5 に答える 5

3

私もCSS3PIEを使用してみましたが、同様の問題に直面しました（主にjqueryとメディアクエリで）。確かに、それが引き起こすすべての問題に対する簡単で実用的な解決策は見つかりませんでした。

私のアドバイスは、Modernizrloadを使用して、古いIEのユーザーエクスペリエンスを段階的に強化することです。CSS3の機能ごとに1つのポリフィルを設定する必要があるため、より困難で長いプロセスが必要になります。mario.tcoがすでに言ったように、Modernizrのリポジトリにはクロスブラウザポリフィルのリストがあります。そして、これが機能検出スニペットのリストです。

html5pleaseとcaniuseもご覧ください。

IE6と7に関しては、サイトの統計で何か別のことが示されていない限り、使用率は平均1％未満であるため（一部の例外を除き、ie6countdownを確認してください）、ほとんど無視できます。ただし、条件付きコメントを使用すると、特定のフォールバックを使用して各IE<10バージョンをターゲットにすることができます。

IE <9では、ボックスシャドウやその他の視覚的な装飾（使いやすさのために必要な場合を除く）は実際には必要ないことに注意してください。実際、フォールバックはおそらく大きなパフォーマンスの問題を引き起こします（IE7ユーザーが持つことができるハードウェアについて考えてください）。Webサイトは、どのブラウザでもまったく同じように見える必要はありません。

于 2013-02-13T11:12:25.280 に答える
2

CSS3PIEは、CSS3の丸みを帯びた角をシミュレートするための非常に便利で強力な方法です。私の会社では、CSS3PIEを選択しましたが、他にも多くの方法があります。

CSS3PIEが丸みを帯びた角を作成する方法<css3-container>では、behavior属性を持つ要素の前の兄弟としてタグが作成されるため、DOM構造が変更され、prev()呼び出しが中断されます。<pre>css-containerは、タグの背後にある丸みを帯びた角の背景のVML描画であるため、重要です。

<pre>これを行う1つの方法は、タグをaのようなものでラップし<div>、それを使用して関数<div>を使用してDOMをナビゲートすることです。prev()

これを行う別の方法は、次のようなjQueryプラグインを作成することです。

/* This adds a plugin prevPie and nextPie - it is the same as the
   existing prev and next, but it will ignore css3-containers. */
(function($){
    function addPlugin(name) {
        $.fn[name + 'Pie'] = function() {
            var result = [];
            this[name]().each(function(i,el){
                if (el.tagName == 'css3-container') {
                    var val = $(el)[name]()[0];
                    val && result.push(val);
                } else {
                    result.push(el);
                }
            });
            return $(result);
        }
    }
    addPlugin('prev');
    addPlugin('next');
})(jQuery);

これで、すべてのブラウザで希望どおりに動作するはずです。

// undefined        expected: getme
alert($("pre").prevPie().attr("class"));
// css3-container   expected: p
alert($("pre").prevPie()[0].tagName);

// getme            expected: foo
alert($("pre").prevPie().prevPie().attr("class"));
// P                expected: div
alert($("pre").prevPie().prevPie()[0].tagName));
于 2013-02-05T03:08:08.773 に答える
2

これを試しましたか：

http://blog.reybango.com/2010/10/11/how-polyfills-fill-in-the-gaps-to-make-html5-and-css3-usable-today/

他の機能に使用できるポリフィルのリストは次のとおりです。

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

于 2013-02-08T16:56:17.577 に答える
1

これはおそらくあなたが探している答えではありませんが、jQueryにPIEの挿入された要素を無視させる代わりに、クラス/ IDをより多く使用し、ページ構造にあまり依存しないようにjQueryを（再）作成することをお勧めします。これには、コードを他のページ構造の変更に対してより回復力のあるものにするだけでなく、コードをもう少し移植可能で再利用可能にするという利点があります。

DOMをトラバースする必要がある場合、jQueryのトラバーサルメソッドのほとんど（すべてではない）には、PIEの要素を除外するために使用できるフィルターセレクター引数が含まれています。次に例を示します。

$("pre").prevUntil('*', 'not(css3-container)')

$("body").children('not(css3-container)')
于 2013-02-07T08:57:58.190 に答える
0

生を使用する代わりにprev()、CSSセレクターを追加して検索を絞り込みます

$("pre").prevUntil('p').attr("class");
// OR
$("pre").prevUntil('.paragraph').attr("class");

CSS3の「ハック」を使用してIE6/7/8を正しく動作させる場合は、DOMをウォークするときに、予想されるDOM構造に依存しないでください。より具体的にしてください。

編集

prev()関数呼び出しをに変更しましたprevUntil()

于 2013-02-05T01:30:39.987 に答える