web-dev-qa-db-ja.com

IE7 CSS継承が機能しない

H2タグにいくつかのスタイル（色、フォントサイズなど）を設定しましたが、「A」タグを中に入れると、スタイルはリンクになります。私のhtml：

<h2>
  <a class="no-decor" href="http://localhost/xxx/">Link</a>
</h2>

ご覧のとおり、「装飾なし」クラスを作成しました。 「a」タグのh2のスタイルを継承する必要があります。

a.no-decor {
  color:inherit;
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
  text-decoration:inherit;
}

Firefoxではすべてに問題はありませんが、IEには引き続きタグ「a」スタイル（下線のテキスト装飾と青色）が表示されます。「h2 a」にスタイルを設定できますが、どういうわけかIE7でCSSが値を継承するように強制することは可能ですか？

追伸IE6ではあまりにもサポートしていません。

P.P.S.同じようにいくつかの例があります： http://www.brunildo.org/test/inherit.html

cssinternet-explorerinternet-explorer-7
34
Pawka

いいえ、IEはどのプロパティでもinheritをサポートしていません。申し訳ありません。これは> = IE8で修正されています。

JavaScriptの修正を使用してh2からaにプロパティをコピーできますが、両方の要素に同じスタイルルールを適用するのがおそらく最も簡単です。

h2, h2 a {
    font: something;
    color: black;
    text-decoration: none;
}

装飾は親から子に継承されないため、テキスト装飾にinheritを設定する必要はありません。下線効果は親に適用され、through the子;子はそれを削除できません（モジュロIEバグ）。子の 'text-decoration：none'は、潜在的にtwoの下線が必要でない限り、正しいことです。 。

55
bobince

試す

a.no-decor{
  color:inherit;
  //color:expression(this.parentNode.currentStyle['color']);
  text-decoration:none;
}

それはあなたの青い色と下線を取り除くでしょう。下線にも同様の式を使用できますが、text-decoration：noneを使用した方がよいでしょう。これは、継承されたtext-decorationがすべての方法を提供し、絶対に必要でない場合は式を使用する必要がないためです（式を使用すると、パフォーマンスが低下します）。

16
Carsen

バグはバグであり、回避策を除いて、あなたにできることは何もありません。

継承サポートのテスト here があります。

ie7-js のようなスクリプトを使用することもできます。これは "Microsoft Internet Explorerを標準に準拠したブラウザのように動作させるJavaScriptライブラリです"

4
yoavf

Internet Explorer <= 7バージョンは、inheritおよびdirection以外のプロパティの値visibilityをサポートしていません。

1
Kld