0

CSS ベースのドロップダウン メニューに取り組んでいます。要素にグラデーションを追加するまでは問題なく動作します。IEで何かが壊れ、<li>サブメニューの項目にカーソルを合わせると、メニューボックスが消えます。

グラデーションを追加してクロスブラウザー互換にするために使用するコードは次のとおりです。

background-color: #c1ddf4; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c1ddf4', endColorstr='#ffffff', GradientType=0); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c1ddf4), color-stop(100%, #ffffff));/* for webkit browsers */
background: -moz-linear-gradient(top, #c1ddf4, #ffffff); /* for firefox 3.6+ */
background-image: -o-linear-gradient(#c1ddf4, #ffffff);

次の例を参照してください。

OK (グラデーションなし) vs. NOT OK (グラデーションあり)

4

1 に答える 1

1

IE フィルターを要素に適用すると、特定の機能が壊れます。私の提案は、CSS ハック、IE のみのスタイル シートを使用するか、またはModernizr.jsを使用してそれをターゲットにすることにより、IE 用に水平方向にタイル化されたグラデーション イメージを使用することです。

本当に適切な方法は、Modernizr を使用して、次の CSS を記述することです。

.no-cssgradients li {
     background: url(gradient.png) repeat-y;
}

そうすれば、CSS グラデーションをサポートしていないブラウザー (IE だけでなく) には、代わりに画像が提供されます。

于 2012-05-02T18:08:04.637 に答える