7

IEは疑似要素（または疑似クラス）のtext-decoration: none;定義を気にしないようです。a:before

ここに JS Fiddle があります: http://jsfiddle.net/9N35f/
">" の下線がなくなると思います。FF、Chrome、Safari ではできますが、IE ではできません。IE10 および IE9 でテスト済み。

質問：

:before要素の下線をなくすために試みることができる回避策はありますか? 理想的には IE9+ で

これに関するバグレポートはどこかにありますか? それとも、実際には基準によるものですか？

4

6 に答える 6

5

display: blockコードで下線を削除する必要があるため、IEはここでエラーになっているようです。CSS 2.1 仕様の条項 16.3装飾によると、「ユーザー エージェントは、テキストではないコンテンツにこれらのテキスト装飾をレンダリングしてはなりません。たとえば、画像やインライン ブロックに下線を付けてはなりません。」</p>

IE Feedback Homeで、これに関する報告がバグのようには見えません。

この場合、適切な回避策は、生成されたコンテンツとして画像を使用することです。

a:before {
    content: url(arrow.png);
}

ここで、arrow.png は適切な小さいアイコンを参照します。url(...)inの使用はCSS3 Generated and Replaced Content Modulecontentで説明されていますが、これは非常に古いドラフト (最終バージョンは 2003 年のもの) ですが、この部分はブラウザーに広く実装されています。ただし、IE 7 にはありません。したがって、IE 7 もカバーしたい場合は、@EugeneXA の回答のアプローチを検討し、JavaScript で追加のマークアップを動的に生成する可能性があります。

于 2013-08-06T04:28:34.900 に答える
2

標準が何を言っているのかはわかりませんが、IE の動作はより論理的であるようです。:before は、タグの外側ではなく、タグの内側の要素と考えてください。子の text-decoration プロパティは、親のものとは何の関係もありません。<a>

この回避策は機能します

http://jsfiddle.net/9N35f/4/

<span><a href="#">a link</a></span>

a {
    text-decoration: underline;
}

span:before {
    content: ">";
}
于 2013-08-05T23:22:25.897 に答える
1

これは私のために働く：

html:

<a href="#"><span>a link</span></a>

CSS:

a {
  text-decoration: none;
}
a span {
  text-decoration: underline;
}
a:before {
  content: ">";
}

この場合、before タグはまだアンカーの一部です。

于 2013-10-19T10:17:01.573 に答える