14

私が取り組んでいるプロジェクトの 1 つは、CSS の「属性」セレクター [att] を使用しています。

CSS セレクター

これは ie6 ではサポートされていません: IE6 での CSS セレクターのサポート(テキスト「属性セレクター」を探します)

もちろん、この問題を克服するための有効なhtml/cssである回避策/ハックはありますか?

4

7 に答える 7

26

悲しいことに、HTML に不要なクラス セレクターのスタックを追加しない限り、これは不可能です。

完全に有効な CSS が最新のブラウザーを使用しているユーザーでも機能するようにサイトを設計することをお勧めします。視覚的には正しくありませんが、IE6 でも引き続き使用できます。サイトを標準に戻すことと、アップグレードしないユーザーのために後ろ向きに曲がることの間で、適切なバランスを見つける必要があります. これは壊れたブラウザです。そのように扱ってください。

于 2009-03-16T06:00:07.523 に答える
20

IE6 は基本的に以下に限定されているため:

  • クラスセレクター
  • ID セレクター
  • (スペース) 子孫セレクター
  • a:-only 疑似セレクター

あなたの唯一のオプションは次のとおりです。

  • より多くのクラスを使用して要素を識別します
  • JavaScript を使用する (高度に特殊な場合を除き、強くお勧めしません)

複数のクラスをスペースで区切って要素に割り当てる機能を利用すると、非常に便利です。class="foo bar"

于 2009-03-16T05:18:01.213 に答える
8

IE6 で属性セレクターが必要な場合は、Dean Edward IE.js を使用できます。 http://dean.edwards.name/IE7/

これにより、IE 5+ が IE7 のように動作します。

次の CSS セレクターをサポートします。
親 > 子
隣接+兄弟
隣接する～兄弟
[attr]、[attr="value"]、[attr~="value"] など
.multiple.classes (バグ修正)
:hover、:active、:focus (すべての要素)
:first-child, :last-child, only-child, nth-child, nth-last-child
:チェック、:無効、:有効
:empty, :contains(), :not()
:前/:後/内容:
:言語()

私はIE6（IE7を使用）を持っていなかったので、うまくいったとは言えませんが、試してみてください

于 2009-03-16T06:21:51.417 に答える
6

Internet Explorer の CSS 式を安全なアンダースコア ("_"、IE6 以前) と組み合わせて使用​​できます。CSS ハック:

/* Adds dotted bottom border to `<ABBR>` with a `title` attribute. */
abbr {
        _border-bottom: expression(this.title ? '1px dotted' : 'none');
}

abbr[title] {
        border-bottom: 1px dotted;
}

「有効な」CSS を要求したことは理解していますが、上記の CSS ハックに不安を感じる場合は、安全な CSS ハックについてお読みください。

上記は次のように変更できます。

.ie6 abbr {
        _border-bottom: expression(this.title ? '1px dotted' : 'none');
}

abbr[title] {
        border-bottom: 1px dotted;
}

つまり、HTML が次のように始まっている場合です。

<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]>   <html class="ie7"><![endif]-->
<!--[if IE 8]>   <html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
于 2011-11-22T18:12:42.663 に答える
5

Dean Edwards のIE7 JavaScript ライブラリは、IE 5 および 6 の属性セレクターのサポートを提供します。

于 2009-03-16T06:17:09.837 に答える
2

悲しいことに、クラスを使用してください。それが唯一の回避策です。

于 2009-03-16T05:19:01.850 に答える
0

サイトで jQuery を使用している場合、もう 1 つのオプションはSuperSelectorsです。これは、サイトのスタイルシートを通過し、要素にクラスを動的に追加して、IE6 でもul li:first-child li:nth-child(odd) a:hover.

于 2009-04-21T19:53:26.017 に答える