☰

IE でリンクの周りの境界線を削除するにはどうすればいいですか? [重複] 質問する

tag-icon • tag-icon html css
IE でリンクの周りの境界線を削除するにはどうすればいいですか? [重複] 質問する

<img>それぞれの要素の中に要素が含まれているナビゲーション バーがあります<a>。しかし、何らかの理由で、IE では画像の周囲に濃い黒の境界線が表示されます。他のブラウザーでは同じことが起きないので、原因がわかりません... これは私が使用している HTML です。

<li>
   <a href="#">
      <span id="nav1">
         <img src="tt_1.png" />
      </span>
   </a>
</li>

私は5つほどのリンクをすべてこのように書いていて、CSSを使ってナビゲーションバーにスタイルを設定しました。他のブラウザではこのように表示されます。良いバー

しかしIEではこのように表示されます悪いバー:(

これまでこのような問題に遭遇したことがなく、これまで解決するために調査した方法もうまくいきませんでした。CSS を使用してこれらの境界線を取り除く方法はありますか?

ベストアンサー1

要約

すべてのリンクと画像から境界線を削除します。

a, img {
    border:none;
    outline:none; /* this breaks accessibility */
}
**完全版**

リンクである画像からのみ境界線を削除する場合は、次の手順に従います。

a img {
    border:none;
    outline:none; /* this breaks accessibility */
}

唯一の違いは、との間にカンマがないことでありa、これは -タグimg内の画像にのみaこのルールが適用されることを意味します。

プロのヒント: CSSリセットを使用する

このようなブラウザの不一致は数多くあるため、Web開発者は「CSSリセット」を使用することが多い。https://necolas.github.io/normalize.css/またはhttp://meyerweb.com/eric/tools/css/reset/これにより、(他の便利な機能の中でも) 多くの要素の境界線や余白などがリセットされ、ブラウザー間でより一貫したレンダリングが実現します。

アクセシビリティに関する注意

開発者からは邪魔だと判断されることが多い点線のアウトラインは、キーボード ユーザーにとって非常に重要な機能を持っています。

あなたがすべき一度もない削除します。削除する場合は、フォーカスがどこにあるかを示す別の視覚的な指標を見つける必要があります。:focusスタイル

おすすめ記事