1

ページ（私は自分で管理しているため、ブラウザのサポートをFF 3.5以降に制限できます）で、StackOverflow.comへの各リンクの後に「SO」を追加したいと思います。最初はこうしました…</p> 

a[href^='https://stackoverflow.com/']:after {
  content: "SO";
  font-size: x-small;
  color: #333333;
  padding-left: 1px;
  position: relative;
  bottom: 3px;
}

…しかしFirefoxはリンク自体のように「SO」に下線を引いた。質問を読んだ後

…私は次の解決策にたどり着きました。

a[href^='https://stackoverflow.com/']:after {
  content: "SO";
  font-size: x-small;
  color: #333333;
  padding-left: 1px;
  position: relative;
  bottom: 3px;
  /* clear the underline */
  padding-bottom: 5px;
  background-color: white;
}

たぶんそれはハックっぽいですが、それはかなり直感的で（下線はその上の背景によって隠されています）、うまく機能しました（FF3.5とFF7以外のブラウザでチェックしたことを覚えていませんが、それでもFFだけです本当にサポートしたいブラウザ）。問題は、FF8でコードが壊れたことです。上記の下線をクリアするコードは機能しません。だから私は解決策を探しています。

実際、私はすでに1つを見つけました：「display：inline-block」を追加しますが、：

  • 「SO」が改行される可能性があります
  • padding-bottomリンク自体に追加されているため、古いアンダースコアクリアコードと一緒に使用することはできません。

http://cssdesk.com/5TqEN

最後の注意：少なくともFF3.5とFF8では、CSSのみを使用し、「SO」テキストを画像にすることなく、inline-blockソリューションよりも優れた機能を実現したいと考えています。

4

1 に答える 1

2

私はこのhttp://jsfiddle.net/wGb68/4/を思いついた

a[href^='http://stackoverflow.com/'] {
    padding-right: 15px;
    display: inline-block; /* not needed, but fixes Chrome and Opera */
}

a[href^='http://stackoverflow.com/']:after {
    font-size: x-small;
    padding-left: 1px;
    content: "SO";
    color: #333;

    position: absolute;
}

text-decorationこのコードを使用すると、FirefoxとOperaでのみ機能します。他のブラウザで動作させることはできませんでした。：/

display: inline-blockFirefoxでは必要ありませんが、OperaとChromeでは必要ありません。「SO」は改行に従わず、コンテナと重なることさえあります。

于 2011-11-20T10:56:49.090 に答える