2

問題のウェブサイト: http://atlanticsig.creativecurvedev2.ca/

ちょっとした背景... これは、メニューに Wayfinder 拡張機能を使用し、サブメニューに Ultimate Dropdown を使用して MODx で構築しているクライアントの開発サイトです。メニューのきれいな背景色を生成するために、CSS グラデーションを使用しています。

私の問題は、IE8 では、「フィルター」グラデーションの背景色を組み込むと、ヘッダー ナビゲーションにドロップダウン メニューが表示されないことです。この問題が発生するのは IE8 ブラウザーのみです。IE7 でも正常に動作します。技術的には、カーソルがサブメニュー リンクをクリックできるため、ドロップダウン メニューが表示されますが、ブラウザはそれらの表示を拒否します。

IE8 の繰り返し背景画像を使用することで問題を修正しましたが、このルートには行きたくありませんでした。確かに CSS ソリューションがあるはずだと思ったので、これを投稿しています。私の好奇心は刺激され、本当の問題が何であったかを見たいと思います.

この問題を次のコード行まで追跡できました。

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */

次のコード ブロックからこの行を削除するとすぐに、ドロップダウン メニューは IE8 で正常に機能しますが、グラデーションは消えてしまいます。

#header_menu {
background: -moz-linear-gradient(top,  #003764 0%, #3b6b89 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#003764), color-stop(100%,#3b6b89)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #003764 0%,#3b6b89 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #003764 0%,#3b6b89 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #003764 0%,#3b6b89 100%); /* IE10+ */
background: linear-gradient(to bottom,  #003764 0%,#3b6b89 100%); /* W3C */
background-color: #003764; /* Old browsers */
height: 38px;
width: auto;
}

グラデーションのさまざまな配置、さまざまな要素へのグラデーションの適用、コンテナーとメニューへのさまざまな高さ/幅/位置の値の適用、z-index 値の操作、余分なブロックの追加など、HTML と CSS で多くの修正を試みました。など

最終的には、常にその「フィルター」行に戻るように見えました (-ms-filter- も試しました)。

他のコードのスニペットが必要な場合は、お知らせください。これは非常に興味深い問題であり、私は本当に解決したいと思っています。

4

1 に答える 1

1

正直なところ、IE のfilterスタイルを使用すると、常に問題が発生します。IE には、予期せず他のものを壊す可能性のあるバグや癖がたくさんあります。

それで、あなたの選択肢は何ですか？

  • CSS3Pie を使用してグラデーションをレンダリングしてみてください。フィルターではなく VML を使用するため、同じバグに悩まされることはありません。(または VML コードを自分で書くこともできますが、それは面倒です)

  • または、IE8 のグラデーションにグラフィックを使用することもできます。標準の CSS グラデーションが背景のグラフィックをオーバーライドするように CSS コードを調整すると、他のブラウザーが CSS グラデーションを引き続き使用でき、グラフィックについて知る必要がなくなります。

  • または、IE8 が古いブラウザーであることを受け入れて、グラデーションではなく無地の背景にすることもできます。見栄えは良くないかもしれませんが、それでも機能します。IE8 をまだ使用している人は、おそらく最近の見栄えの悪いサイトに慣れているでしょう。

于 2013-04-03T21:10:01.657 に答える