私は私の文書でアンカータグのグローバルルール持っている画像

Question

含まれているアンカータグにはボーダー：

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

をしかし、境界線が画像に良い見ていないし。純粋なCSSを使用している画像しか含まれていないアンカータグの境界線を削除する方法があるのなら、私は興味がありましたか？

Answer 1

私はこれが見つかりました：それは魔法のように動作し、何のブラウザ競合を持っていない

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

：詳細は記事を参照してください。これは、基本的にはこのようになり、非常に簡単なハックですhttp://konstruktors.com/blog/web-development/1122-remove-border-from-image-links/

を。

Answer 2

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

ほとんどの場合、イメージを含まないすべてのリンクでclass属性を使用し、CSSルールで対応するクラスセレクタを使用します。

ほとんどのリンクに画像が含まれていない場合は、ネガティブアプローチを使用して画像が含まれているリンク（たとえばclass=imagelink）にクラスを設定し、CSSの:not(.imagelink)セレクタを使用できます。 :not(...)へのサポートは普及していますが、普遍的ではありません。さらに別のアプローチは、そのようなサポートにはカウントされません、あなたの質問のようにすべてのリンクの下の境界線を設定し、画像のリンクのためにそれをオフにすることです。残念ながら不可

a.imagelink {border-bottom: none;} 

Answer 3

、！私はこれをjqueryを使って行っただけだと思います。

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

Complex CSS selector for parent of active child

Is there a CSS parent selector?

Answer 4

それはcssを使用ことはできませんが、あなたはjQueryを使用していますcssParentSelector.jsスクリプトを追加する場合は、cssを使用してそれを行うことができます。それはimgタグの親だが、今でもそれはcss純粋ではない場合Here is an example

a! > img { border: none; }​ 

css上記のルールはaタグから境界線を削除し、dependendenciesを持っています。

Answer 5

vertical-alignトリックは透明でない画像でのみうまく動作し、aline-heightが画像の高さ（ソーシャルネットワーキングのアイコンは小さいと思う）より大きい場合はまったく動作しません。

私はここで受け入れられた解決方法を使用できますが、上記の問題とともに、テキストブロック内のインラインイメージの配置を捨ててしまいます。

a > imgの底に固体の白いbox-shadowを置いておきました。これはIE8以降のバックアップの場合はfilterの影です。それを1日と呼びます。レイアウトを混乱させないでください：

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 } 

Answer 6

あなたの質問への他の答えで言われたように、それは今のところCSSでできません。しかし、あなたはjQueryの、偉大なこの作品を使用する場合：ページが画像を含むリンクを検索し、CSSルールに述べるロードされ

$(document).ready(function(){ 

    $('a img').parent().css('border','none'); 

}); 

それ基本的に後を国境：なし;、つまりイメージの親要素。リンク。