ハイパーリンク画像の周りのアウトラインを削除するにはどうすればよいですか？

CSSを使用してテキスト置換を使用し、否定的なテストインデントを与える場合text-indent:-9999px。次に、そのリンクをクリックすると、下のサンプル画像のように点線が表示されます。これに対する解決策は何ですか？

アンカータグのアウトラインの削除

a {outline : none;}

画像リンクから輪郭を削除

a img {outline : none;}

画像リンクから枠を削除

img {border : 0;}

アンカー要素では、CSSプロパティ「outline」と値「none」を使用できます。

a {
outline: none;
}

お役に立てば幸いです。

Internet Explorer 9の場合：

a:active, a:focus { 
 outline: none; 
 ie-dummy: expression(this.hideFocus=true);
}

ソース：http：//social.msdn.microsoft.com/Forums/en-HK/ieextensiondevelopment/thread/1023adfd-bd73-47ac-ba9c-2bad19ac583a

フォーカススタイルが存在するのには理由があることに注意してください。フォーカススタイルを削除すると、キーボードを使用して移動したユーザーは何がフォーカスされているか分からなくなるため、Webサイトのアクセシビリティが損なわれます。

（それらを所定の位置に保持することは、マウスを使用したくないパワーユーザーにも役立ちます）

FirefoxとInternet Explorer（IE）には同じボーダー効果があり、リンクをクリックすると表示されます。

このコードはIEだけを修正します。

a:active { outline: none; }.

そして、これはFirefoxとIEの両方を修正します：

:active, :focus { outline: none; -moz-outline-style: none; }

サイトからリンクの境界線を削除したい場合は、最後のコードをスタイルシートに追加する必要があります。

このコードをスタイルシートに含めます

img {border : 0;}

a img {outline : none;}

これがあなたの一部にとって役立つことを願っています。リンク、画像、フラッシュ、およびMSIE 9からアウトラインを削除するために使用できます。

    a, a:hover, a:active, a:focus, a img, object, embed {
    outline: none;
    ie-dummy: expression(this.hideFocus=true); /* MSIE - Microsoft Internet Explorer 9 remove outline */
    }

以下のコードは画像の境界線を隠すことができます：

    img {
    border: 0;
    }

Firefox 3.6.8をサポートし、Firefox 4はサポートしない場合...入力type = imageをクリックして下線を引くこともできます。古いバージョンのfirefoxでそれを削除するには、次のようにします。

   input::-moz-focus-inner { 
   border: 0; 
   }

IE 9では、ページ間およびページ内にこのメタタグを含めない限り、リンク周辺の点線のアウトラインを削除できない場合があります。

     <meta http-equiv="X-UA-Compatible" content="IE=9" />

これはGoogle Chromeで動作する最新のものです

:link:focus, :visited:focus {outline: none;}

-moz-user-focus: ignore; Geckoベースのブラウザ（適用方法によっては！importantが必要になる場合があります）

このようにHTML 4.01に使用する

<img src="image.gif" border="0">

あなたは置くことができますoverflow:hiddenページのうちスパンが、消えるだろうという、テキストインデント、およびその点線でプロパティに。

アウトラインをまとめて削除することについての投稿をいくつか見てきました。サイトのアクセシビリティが低下する可能性があるため、これを行うときは注意してください。

a:active { outline: none; }

私は個人的にはこの属性のみを使用します。属性に:hover同じcssプロパティがある場合、ナビゲーションにキーボードを使用しているユーザーにアウトラインが表示されないようにするためです。

これで問題が解決することを願っています。

点線のアウトラインのhrefリンクを削除するために、cssファイルに書き込むことができます。

a {
   outline: 0;
}

ほとんどのユーザーは、キーボードをナビゲーションコントロールとして使用するタイプのユーザーではないでしょう。次に、キーボードナビゲーションを使用することを好む小規模なグループで、ユーザーの大多数を困らせることは許されますか？短い答え—ユーザーが誰であるかによって異なります。

また、FirefoxとSafariで同じようにこのエクスペリエンスを見ることはありません。したがって、この議論は主にIEに向けられているようです。それはすべて、実際にはユーザーベースとその知識レベル（サイトの使用方法）に依存します。

自分がどこにいるのかを本当に知りたいのであれば、あなたがキーボードユーザーであれば、サイトをキー操作するときに常にステータスバーを見ることができます。

これは私にとって完璧に機能します

a img {border:none;}

リンクのある画像には、古いブラウザとのリンクであることを示すために、画像の周囲に境界線があります。IMG HTMLタグにborder = "0"を追加すると、その画像の画像の周囲に境界線ができなくなります。

ただし、すべての画像にborder = "0"を追加すると、時間がかかるだけでなく、ファイルサイズとダウンロード時間が長くなります。画像に境界線を付けたくない場合は、以下のコードを含むCSSルールまたはCSSファイルを作成します。

img {border-style：none; }

上記の解決策が誰にとっても機能しない場合。これも試してみてください

a {
 box-shadow: none;
}

これがこの個人にとってまだ問題であるかどうかはわかりませんが、一般的に多くの人にとって苦痛になる可能性があることは知っています。確かに、上記の解決策はで動作するいくつかの事例が、あなたは、例えば、ワードプレスのようなCMSを使用して、アウトラインプラグインやテーマのいずれかによって生成されている、あなたが最も可能性が高いだろうしている場合ではない、この問題はに応じて、解決してきましたCSSを追加する方法。

別のStyleSheet（たとえば、 ' Lazyest StyleSheet 'プラグインを使用）を用意し、その中に次のCSSを入力して、既存のプラグイン（またはテーマ）強制スタイルを上書きすることをお勧めします。

a:hover,a:active,a:link {
    outline: 0 !important;
    text-decoration: none !important;
}

特定のルールに' ！important 'を追加すると、ルールが他の場所にある場合でも（プラグイン、テーマなどに関係なく）、これが生成の優先順位になります。

これにより、開発時の時間を節約できます。もちろん、元のソースを掘り下げることはできますが、多くのプロジェクトで作業している場合、または更新を実行する必要がある場合（変更を上書きできる場合[ 推奨されません！ ]）、または新しいプラグインやテーマを追加する場合は、これが最適です時間を節約するために頼る。

これが役立つことを願っています...平和！

はい、使用できます。CSS a {outline:none}もまたリセット

a:focus, a:active {outline:none} CSSのリセットのベストプラクティスでは、ベストソリューションは共通のものを使用してい:focus{outline:none}ます。それでもベストオプションがある場合は、共有してください。