9

ドキュメント内のアンカー タグのグローバル ルールがあります。

a,a:hover {border-bottom: 1px solid #ccc;}

しかし、境界線は画像では見栄えがよくありません。純粋なcssのみを使用して画像を含むアンカータグの境界線を削除する方法があるかどうか興味がありましたか?

4

6 に答える 6

10

私はこれを見つけました: http://konstruktors.com/blog/web-development/1122-remove-border-from-image-links/

基本的には、次のような非常に単純なハックです。

a img { border:none; vertical-align:top; }

それは魅力のように機能し、ブラウザーの競合はありません。詳細については、記事を参照してください。

編集:border:noneほとんどの状況で実際には何も役に立ちません。境界線は img タグではなくアンカー上にあるため、アンカーされた画像の境界線をグローバル CSS リセットで既にゼロに設定している場合は、の境界線を画像の後ろvertical-align:topに押し上げるだけで済みます。a見えなくなります (画像が不透明である限り)。

于 2013-07-29T13:17:51.487 に答える
4

いいえ、現在 CSS には、子孫に基づいて要素を選択するセレクターはありません。JavaScript または CSS のクラスを使用する必要があります。

最も確実なのclassは、画像を含まないすべてのリンクで属性を使用し、CSS ルールで対応するクラス セレクターを使用することです。

ほとんどのリンクに画像が含まれていない場合は、否定的なアプローチを使用して、画像を含むリンクにクラスを設定し、CSS でセレクターclass=imagelinkを使用できます。:not(.imagelink)へのサポート:not(...)は広く行われていますが、普遍的ではありません。そのようなサポートを期待しないさらに別のアプローチは、質問のようにすべてのリンクに下の境界線を設定し、画像リンクの場合はオフにすることです。

a.imagelink {border-bottom: none;}
于 2012-12-29T20:03:08.400 に答える
2

残念ながら不可能です！私はjqueryを使用してこれを行っただけだと思います。

http://www.w3schools.com/cssref/css_selectors.asp

アクティブな子の親の複雑な CSS セレクター

CSS 親セレクターはありますか?

于 2012-12-29T20:04:17.990 に答える
2

を使用cssすることはできませんが、を使用するcssParentSelector.jsスクリプトをcss追加すると使用できます。ここに例がありますjQuery

a! >  img { border: none; }​

上記のcssルールは、aタグの親である場合にタグから境界線を削除しますimgが、それでも純粋cssではなく、依存関係があります。

于 2012-12-29T20:09:21.207 に答える
2

このvertical-alignトリックは、透明でない画像でのみ[うまく]機能しa line-height、画像の高さよりも大きい場合はまったく機能しません (小さなソーシャル ネットワーキング アイコンを考えてみてください)。

ここで受け入れられた解決策を使用できたらいいのにと思いますが、上記の問題とともに、テキスト ブロック内のインライン画像の配置がずれてしまいます。

IE8 以前の場合はバックアップシャドウとして、box-shadowの下部に白を塗りつぶすことにしました。これで終わりです。レイアウトを台無しにしません:a > imgfilter

a { text-underline: none; 
    border-bottom: 1px solid blue; }

a img { box-shadow: 0 .333em 0 0 white; /* white, or your background color */
        filter: progid:DXImageTransform.Microsoft.Shadow... etc  }
于 2014-01-16T16:54:31.487 に答える