35
4

5 に答える 5

41

問題は、「IE8の疑似要素でフィルターが機能しないのはなぜですか？」です。以下は、私が集めることができる限り決定的な答えに近いものです。これは、このページの情報に基づいています。

フィルタは「gradient手続き型サーフェス」です（と一緒にalphaimageloader）。手続き型サーフェスは次のように定義されます。

手続き型サーフェスは、オブジェクトのコンテンツとオブジェクトの背景の間に表示される色付きのサーフェスです。

それを注意深く読んでください。これは本質的に、オブジェクトのコンテンツとそのオブジェクトの背景の間にある別の「レイヤー」です。質問に対する答えがわかりますか？とによって作成されたもの:before...:afterはい！コンテンツ。特にMSDNノートとして：

::beforeおよび::after疑似要素は、ドキュメントツリー内の要素の前後のコンテンツの場所を指定します。content属性は、これらの疑似要素と組み合わせて、挿入されるものを指定します。

生成されたコンテンツは、関連する要素のすぐ内側に挿入された実際の要素であるかのように、他のボックスと相互作用します。

ここで、生成されるのがコンテンツである場合、それはコンテンツを含む「オブジェクト」ではなく、コンテンツ自体です（コンテンツを含む可能性のある要素オブジェクトと同様の動作をします）。

したがって、 「コンテンツ」を含む「オブジェクト」はありません（コンテンツであるため）。その間にfilter、疑似要素（つまり「偽の要素」）によって生成されたコンテンツの手続き型サーフェスを配置できます。オブジェクトにAgradientを適用する必要があります。次に、オブジェクトとコンテンツの間に手続き型サーフェスを配置します。

于 2012-05-20T01:00:04.467 に答える
6

-ms-filter-の同義語-に関するドキュメントは次のようにfilter述べています。

オブジェクトには、フィルターをレンダリングするためのレイアウトが必要です。

私の最初の推測は、コンテンツがtrueに設定されて:beforeいないということでした。hasLayoutまた、おそらくtrueに設定されていませんが、falseにも設定されていない可能性があります。手始めに、hasLayoutドキュメントに従ってコンテンツを強制的に取得した場合hasLayout = true（jsfiddleを参照）、何も解決されませんでした。

ですから、それは真実でも誤りでもないと思います。代わりに、おそらく未定義です。私は同じドキュメントで、このプロパティのソースについて述べていることに気づきました。

オブジェクト.currentStyle.hasLayout

コンテンツプロパティに関するW3ドキュメントを見ると、次のようになっています。

生成されたコンテンツはドキュメントツリーを変更しません。特に、それはドキュメント言語プロセッサにフィードバックされません（例えば、再解析のために）。

したがって、考えられる結論は、生成されたコンテンツはオブジェクトではなく、currentStyleプロパティを持たず、したがってにhasLayout設定されていないということtrueです。これが、生成されたコンテンツに対してフィルターが機能しない理由であり、したがって質問に答えます。

一見すると、上記のフィドルのコンソールでヒントを見つけたと思いました。

document.querySelectorAll('div')[0].currentStyle.hasLayout; 
// true

document.querySelectorAll('div:before')[0].currentStyle.hasLayout
// Unable to get value of the property 'currentStyle': 
// object is null or undefined

しかし、@ BoltClockによるコメントで述べられているように、querySelectorAllは疑似要素にアクセスできません。

filter疑似要素では機能しない別のヒント（ただし、これもヒントにすぎません）は、フィルターに関するこのmsdnの概要で、（私の強調）と述べています。

フィルタは、フィルタプロパティを介してHTMLコントロールに適用されます

:before「HTMLコントロール」の意味はわかりませんが、疑似要素によって生成されたコンテンツが「HTMLコントロール」と見なされるとは思いません。

于 2012-05-19T22:50:32.557 に答える
0

filterこれにIEのスタイルを使用するのではなく、CSS3Pieの使用を検討しましたか？

これは、標準のCSSとグラデーションのサポートを追加するIEのスクリプトであるため、box-shadowIE固有のスタイルをすべて用意しなくても、すべてのブラウザーで同じコードを記述できます。

于 2012-05-04T08:19:57.523 に答える
0

私はすでに私の好みの解決策（CSS3Pieを使用）を与えましたが、これを別の答えとして投稿します。

filterIE8がIE7が機能する場所で機能しない理由として考えられるのは、IE8がの構文を変更したためfilterです。

filterIE固有の独自のスタイルです。MicrosoftがIE8をリリースしたとき、彼らは「標準に準拠」しようとする大きなポイントを作りました。非標準スタイルをサポートする「標準準拠」の方法は、ベンダープレフィックスを付けることであり、これはMicrosoftが行ったことです。

したがって、IE8では、次のことを行う必要があります。

-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=0 )";

IE7はこの構文をサポートしていないため、両方が必要です。

IE8は、実際には古い構文で動作する場合があります。それが機能しない場合は、progid:構文を使用する場合である傾向があります。この理由は、後のコロンによって無効なCSS構文になるためです。これが、MSがIE8バージョンprogidのシン全体に引用符を追加した理由です。-ms-filter

つまり、簡単な答えは、スタイルシートで両方のバージョンを使用することです。そうすれば問題ありません。

于 2012-05-05T10:55:44.893 に答える
0

うわー、これは難しいものです。

このグラフを確認し、IE8が疑似要素の単一のコロンのみを好むことを確認し、この関連する可能性のあるブログ記事を読み、jsFiddleで多くのテストを行った後（ただし、73 ?? jsFiddlesと比較すると少しです）、これはIE8のバグであると結論付ける必要があります。

IE9は疑似要素（base64ナンセンス）でグラデーションを実行できますが、IE8は頑固に壊れています。

于 2012-05-19T03:38:31.547 に答える