0

私は、ユーザーがコントロールパネルのスライドを使用してページのルックアンドフィールを変更できるこのカラーコントロールパネルで実験しています。さらに複雑なのは、スライドインパネルが親ウィンドウにあり、変更が加えられたページがiframe内にあることです。コントロールパネル内で行われる変更を有効にしたい。このために私はAJAXを使いたくありません。このために私はアルゴリズムを考案しました、そしてそれはうまく働いています。

IE8の問題以外はすべて正常に機能しています。ページが読み込まれるとき、デフォルトとしてcssでこのスタイル定義を使用しています。

（Louis Lazarisに感謝します-http ://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/）

background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#4477a1),color-stop(1, #81a8cb)); /* Safari & Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */

これが、jQueryを使用してjavascriptで実行しようとしていることです（hex1とhex2は、グラデーションの2つのhex値を含む2つの変数です）。

jQuery('#iframeId').contents().find('.gradient').css(
{
        backgroundImage: '-moz-linear-gradient(top,' + hex1 + ',' + hex2 + ')', /* Firefox 3.6 */
        backgroundImage: '-webkit-gradient(linear,left bottom,left top,color-stop(0,' + hex1 + '),color-stop(1,' + hex2 + '))', /* Safari & Chrome */
        filter:  'progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=' + hex1 + ', endColorstr=' + hex2 + ')', /* IE6 & IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='" + hex1 + "', endColorstr='" + hex2 + "')" /* IE8 */
});

-ms-filterの最後の条件を除外すると、コードは正常に実行されます（これは、このフィルターがjQuery.cssでサポートされているかどうかについては、どこにも記載されていないためです）。私の問題に対する1つの解決策は、ブラウザの名前とバージョンを使用して確認することです。

navigator.userAgent

「InternetExplorer8.0」の場合は、単一の背景色を適用します。

今私の質問は、これを回避してIE8でグラデーションを取得する他の方法はありますか？

4

2 に答える 2

3

jQueryでCSSを設定するための代替構文があります。以下で試してみてください

jQuery('#iframeId').contents().find('.gradient').css({
    'background-image': '-moz-linear-gradient(top,' + hex1 + ',' + hex2 + ')', /* Firefox 3.6 */
    'background-image': '-webkit-gradient(linear,left bottom,left top,color-stop(0,' + hex1 + '),color-stop(1,' + hex2 + '))', /* Safari & Chrome */
    'filter':  'progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=' + hex1 + ', endColorstr=' + hex2 + ')', /* IE6 & IE7 */
    '-ms-filter': "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='" + hex1 + "', endColorstr='" + hex2 + "')" /* IE8 */
});
于 2013-01-17T08:25:11.857 に答える
0

JavaScriptに問題があります。のオブジェクトキーは-ms-filter、二重または単一の角かっこで囲む必要があります。そうしないと、構文エラーが発生します。

于 2013-01-17T08:26:32.020 に答える