9

IE6 は子セレクターをサポートしていないため ( http://kimblim.dk/csstest/#ex1を参照)、このブラウザーを扱う場合の代替手段は何ですか?

マークアップを変更したくありません。CSS のみのソリューションが望ましいと思います...

そうです、私がターゲットにしたいのは直系の子です。

ありがとう！

4

8 に答える 8

9

ハックのようなものに遭遇し ました: http://meyerweb.com/eric/thoughts/2005/05/31/universal-child-replacement/これにより、直接の子を選択できます。E の直接の子である F に 10px の padding-top を適用したいとしましょう:

* html body E F
{
    /* apply style here for IE 6 */
    padding-top: 10px;
    /* This applies the style to every F inside of E */
}
* html body E * F
{
    /* undo style here */
    padding-top: 0px;
    /* This will undo the style set above for every F that has something in between itself and E, that is, every F besides the direct children of E */
}

これまでの回答に感謝しますが、私自身の回答を受け入れるのは嫌いですが、これが最終的に落ち着いた解決策でした. みんなありがとう！

于 2009-01-12T21:14:45.597 に答える
4

jQuery を使用できますが、これはかなりの解決策ではありませんが、これは私が過去に使用したオプションの 1 つです。

$("parent > child").each(function() {
    $(this).addClass("child-styles");
}

明らかに、これを特殊な IE6 のみのチェックでラップする必要があります。そしておそらく、これらの特殊なスタイルを追加するために、IE6 IF ステートメントでラップされたスタイル シートが必要になるでしょう。

于 2009-01-12T19:38:41.313 に答える
1

この投稿では、ネストされた構造を操作するための最後のちょっとしたトリックを含め、IE6でCSS子セレクターをエミュレートするためのさまざまなオプションのすべてについて説明します：http：//craftycode.wordpress.com/2010/05/19/emulating-css-child -selectors-in-ie6 /

于 2010-05-19T18:17:31.380 に答える
1

これが私が本で見つけた良い解決策です：「Javascriptのアンソロジー」

そんな感じ：

/* for all but IE */
#nav ul li.currentpage > a:hover {
  background-color: #eff;
}

IE に対応するコードは次のとおりです。

/* for IE */
* html #nav ul li.currentpage a:hover {
  background-color: expression(/currentpage/.test(this.parentNode.className)? "#eff" : "#ef0");
}

IE のハックは、IE だけが html にラッパーがあると考えており、IE は expression() をサポートしていないことです。

この式は正規表現 (/currentpage/) を使用し、親ノードのクラスに対してテストするため、要素 li.currentpage の直接の子は #eff に設定され、他の子孫は #ef0 に設定されます。

使用されている色は偽物であることに注意してください。コメントしないでください;-)

于 2009-10-20T08:48:19.740 に答える
0

直系の子は必要ですか？IE6 は次のような子孫セレクターをサポートしています

div span { ... }

おそらく、それを活用して、必要なものをターゲットにすることができます。より具体的な回答を提供できるように、コードを投稿していただけないでしょうか?

于 2009-01-12T19:38:43.780 に答える
0

要素にカスタム クラスを配置します。

<ul>
<li class="first">Blah<li>
<li>Blah<li>
<li>Blah<li>
</ul>
于 2009-01-12T19:39:03.560 に答える
0

私が使用したクロスブラウザー ソリューションは次のとおりです。IE6 のハックを使用せず、埋め込まれたリストを正しく表示します (たとえば、OL と UL のネストされた項目を異なるスタイルにする必要があるとします)。

ul, ol {
    /* Set margins, padding, and other generic styles */
}
ul li, ul ul li, ol ul li {
    list-style-type: disc; /* unordered lists */
}
ol li, ul ol li, ol ol li {
    list-style-type: decimal; /* ordered lists */
}

CSS をヨーデルするのと同じくらい簡単です。

于 2011-06-08T19:56:56.783 に答える
0

これを使って

div * { padding-left:20px; }
div * * { padding-left:0; }

最初にすべての子をターゲットにしてから、すべての孫をターゲットにして css 宣言をリセットします。

于 2010-02-11T01:38:50.390 に答える