FFとOperaの子要素の下線色を変更します（IE、Safari、Chromeで動作します）

Question

ストーリー： リンクがあります。リンクの一部は、少し異なる（サイズと色が異なる）スタイルにする必要があります。

HTML：

<a href="#">Lorem Ipsum <span>Lorem Ipsum</span> Lorem Ipsum</a> 

CSS：

a { color: blue; text-decoration: underline; } 
a span { color: yellow; font-size: 2em; } 

問題： は私が何であれ、私はスパンのテキスト内の下のラインを持っているための良い方法を取得することはできませんテキストと同じ色。

私が見ることができる唯一の解決策は、テキスト装飾：なしをaタグに設定し、各子に設定することです。しかし、これは私にとっては良い方法のようには見えません。私はFirefoxのV12（WindowsとUbuntuの）、オペラV11、IEのV7、IEのV9、Safariのバージョン5.1とChrome（夜間）でこれをテストしてみた

...

のみFirefoxとOperaは持っているように見えますこの問題（Operaよりも悪いのはOperaですがOperaについてはあまり気にしません）。

編集： ここでの目標は、完全に行を削除するのではなく、色を変更することです（解決方法によって）。 Chrisが書いた答えからわかるように、私はそれがオーバーペインティングのようなものでなければならないと思う。それは少なくともIEとWebkit-Browsersのように見えます。

例：ここでは、拡張の例へのリンクです ： http://jsfiddle.net/r2dhb/3/

アップデート：あり CSS3 http://www.w3.org/TR/css3-text/#decorationに変わる何かが決定的だが、このようなものがでサポートされていないので、私は気にしませんブラウザのいずれかが

Answer 1

はここ（のFirefoxのみ）私の回避策です。

もちろん、下線はまだまだ太いですが、CSS3でそれを変更することはできますか？

ありがとうございました。

Answer 2

引用はhttp://www.w3.org/TR/CSS2/text.html#propdef-text-decoration

0からです:)します

子孫要素の 'text-decoration'プロパティは、祖先の装飾には の効果を持たせることはできません。利用者エージェントは、 とテキスト装飾線の太さを決定する際に、 を子孫のフォントサイズと支配的なベースラインと考えるかもしれませんが、各行で同じベースラインと太さを使用する必要があります。 子孫を相対的に配置すると、子孫のテキスト と一緒にそれに影響するすべてのテキスト装飾が移動します。その行のデコレーションの初期位置の計算には影響しません。

上記の引用は可能な限り明示的ではありませんが、子要素の下線の状態に関係なく、親要素に下線が付くことを意味します。下線の太さは一貫していなければならないことも示唆しています。テキスト装飾に必要な

色（複数可）「テキスト装飾」 セットされている要素の 「色」プロパティの値から導出されなければなりません。子孫の 要素が異なる '色'値を持っていても、装飾の色は同じでなければなりません。

この第2の引用は、与えられた要素の下線に対して実際に色が変わらないことを示唆しています。したがって、黄色のテキストの下に行くときの変化しない色は仕様通りです。

私は、下線を外すことを許可する方法があるはずだと思うことに同意しますが、個々のdivに下線を適用することで回避できます。したがって

a span.test3 { text-decoration: underline; vertical-align: 4%; } 

子（スパン）下線は、親（a）の下線を非表示にする：