皆さん、こんにちは。私は非常にユニークな (らしい) 問題を抱えています。コンテキストを示してから、いくつかのコードを提供します。
環境:
「TheLegacy」というサイトがあります。「TheLegacy」は段階的に廃止されています。サイトを作成しています。「TheFuture」と呼びましょう。「TheFuture」は「TheLegacy」のアップグレード版です。MVC4 を使用して、舞台裏でいくつかの jquery とノックアウトを使用して作業を行っています。「TheFuture」は段階的に展開されており、完了するまでは「TheFuture」内の iFrame 内に「TheLegacy」をホストします。これは、「TheFuture」でまだ構築されていない、必要な特定の機能/ページにユーザーがアクセスできるようにするためです。
問題:
1 つの非常に苛立たしい問題を除いて、すべてが順調です。データのグリッドである「TheLegacy」に割り当てページがあります。このグリッドは、JQuery テンプレートを使用して html テーブルで構築されています。各行の内側には、クラスを持つ "" タグがあります。このクラスには、css background プロパティと css hand プロパティの 2 つがあります。このクラスにリンクされた jquery 機能もあります。クラスは「chevronArrow」と呼ばれます。ユーザーが「chevronArrow」で div をホバーまたはクリックすると、addClass の「chevronArrowActive」を jquery する必要があり、ユーザーが別の div をクリックするか「unhovers」すると、「chevronArrowInactive」に戻る必要があります。
上記のすべてが完全に正常に機能することを明記しましょう。唯一の問題は、'TheLegacy' が 'TheFuture's iFrame 内で表示される場合、'chevronArrowActive' および 'chevronArrowInactive' の画像が表示されないことです。さらに、これは IE のみの問題であり、Chrome は正常に動作します。'TheLegacy' は、IE または Chrome で ('TheFuture' iFrame の外で) 単独で表示した場合も問題なく動作します。
試みられた解決策:
・「TheFuture」のiframe読み込みにcssを注入してみました。サイコロはありません。
・「TheFuture」のiframeロードで、「TheLegacy」のエレメント、ボディ、ヘッドに直接スタイルを追加してみました。サイコロはありません。
-直接スタイルを取得し、「TheLegacy」のボディの下部に手動で配置してみました。これは機能しましたが、実用的な解決策ではありません。
私たちの必要なもの:
なぜこれが起こっているのか、誰かが似たようなことに出くわしたのか、なぜこれが起こるのかについて何らかの考えを持っているのかを理解する必要があります.
コード:
このコードは、jquery テンプレートに使用される .htm ファイル内にあります。
クラス部分:
.chevronArrowInactive
{
background:url('Images/chevron_arrow_inactive.png') no-repeat left center;
cursor:hand;
}
.chevronArrowActive
{
background:url('Images/chevron_arrow_active.png') no-repeat left center;
cursor:hand;
}
html 部分:
<a href="" title="Click to view list of producer code(s)" class="jqrAgencyProducerCount"><div style="width:100%;height:20px" class="chevronArrowInactive chevronArrow"></div></a>