0

メイン ナビゲーション リンクでドロップダウン メニューを使用しており、すべて (現在のナビゲーション ボタン/リンク (border-radius を使用して角を丸めたもの) およびドロップするサブナビゲーション要素全体) の周りに 1 ピクセルのドロップ シャドウを追加する必要があります。下）。

JSFiddle にデモを投稿しました。

http://jsfiddle.net/thebluehorse/TFqjR/2/

誰かがそれを更新できますか、それともナビゲーション リンクにカーソルを合わせたときにすべての周りに 1 ピクセルのドロップ シャドウを表示するにはどうすればよいですか? メインナビゲーションの丸みを帯びた角を一周する必要があることに注意してください。IE7+ をサポートする必要がありますが、box-shadow を使用する場合は、CSS3 Pie をヘルパーとして使用できると思います。

どんな助けでも大歓迎です。このことは私を夢中にさせてきました。

4

1 に答える 1

1

目標を達成する方法はいくつかあります。ul最も簡単なのは、入れ子になった要素に静的クラスを設定することです。これは、親のホバー イベントによってトリガーされたときにのみ表示されるためです。例: http://jsfiddle.net/deloretta/gspnK/ (注: 親要素内のテキストが「ジャンプ」しないようにするには、要素に 1 ピクセルのパディングを追加し、ホバー時に削除するか、位置合わせを試みることができます。テキストを集中的に、または好きな方法で）。

第二に、より非効率的な方法 (ただし、ここでは説明しません) では、この要素に子があるかどうかを調べて、次のようにクラスをそれらに適用できます: http://jsfiddle.net/deloretta/XVrr6/

理想的には、IE7+ スタイルは独自のスタイル シートに存在し (IE7+ は!important構文をサポートしているため)、条件付きコメントを使用してそれらにアクセスできます。基本的に、borderプロパティを取り除き、IE 固有のスタイルシートに配置します。IE は宣言-moz-と-webkit-宣言を無視し、プロパティを正しくレンダリングしますがborder、moz/webkit は条件付きコメントを無視し、ボックス シャドウをレンダリングします。ラブリージャブリー。

お役に立てれば！

編集 - 最初のコメントへの応答:

私はあなたのコメントを理解していると思います。そうでない場合はお知らせください。さらにお手伝いさせていただきます。

これを条件付きコメントで機能させるには、2 つのスタイルを分離する必要があります。1 つは IE に固有で、もう 1 つは他のすべてのブラウザーに固有です。次のようにできます。

<link rel="stylesheet" type="text/css" href="/style.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/style_ie.css"> 
<![endif]-->

次に、既存のスタイルシートを変更して、次の情報を含める必要があります。

#nav #link1.selected > a {
  padding-bottom: 10px;
  margin-bottom: 0;
  -webkit-border-radius: 5px 5px 0 0;
     -moz-border-radius: 5px 5px 0 0;
          border-radius: 5px 5px 0 0;
  /*the border declaration used to be here
  but we moved to another stylesheet
  specifically for IE*/
  -webkit-box-shadow:0px 1px 1px #f0f;
  -moz-box-shadow:0px 1px 1px #f0f;
}
.static_class{
  /*border used to be here*/
  -webkit-box-shadow:0px 1px 1px #f0f;
  -moz-box-shadow:0px 1px 1px #f0f;
}

次に、別のスタイル シートを作成しstyles_ie.cssます。これには、他のスタイル シートから削除した境界線情報が格納されます。そのようです：

#nav #link1.selected > a {
  border-bottom:1px solid #f0f;
  border-left:1px solid #f0f;
  border-right:1px solid #f0f;
}
.static_class{
  border-bottom:1px solid #f0f;
  border-left:1px solid #f0f;
  border-right:1px solid #f0f;
}

それで…どうなるの？

Internet Explorer は、条件付きコメントをサポートする唯一のブラウザーです。そのため、Firefox、Safari、または Chrome がページに表示されると、コメントが無視されるため、コメントにリンクされているスタイル シートがレンダリングされません。
Internet Explorer がページに到達すると、プロパティやプロパティなどを無視して、理解できるものすべてをレンダリングします(styles.cssそれらを理解しないため)。次に、条件付きコメント (理解できる) に進み、スタイル シートをロードして、追加のスタイルを要素に適用します。簡単に、レモンを絞って:]border-radiusbox-shadowstyles_ie.css

于 2011-04-26T05:49:30.680 に答える