私の画像のリンクは、この奇妙な形の輪郭をしているのはなぜですか？

Question

私は境界線が現れても気にしません。私はoutline: 0を使って境界線を完全に取り除くことができますが、私はthat's badも知っています。

HTMLの設定が

<li> 
<a href='..'><img alt='..' src='..'/></a> 
<a href='..'>...</a> 
</li> 

CSSの抜粋です：

li{ 
    display: block; 
    width: 9em; 
    margin-right: 1em; 
    height: 12em; 
    text-align: center; 
} 

li img{ 
    height: 8em; 
    display: block; 
    margin: 0 auto; 
} 

（2が単一の<a>に結合された場合の効果は同じです。）

私は思いますこれは画像にdisplay: blockを使用することに関連しています。私はここでの問題を再現しました：http://jsfiddle.net/pvd69wce/

Answer 1

を支援するよう、画像がそれ以下のリンクを強調するために、1つの解決策は、を与えることですから<a>までです。

li { 
 
    display: block; 
 
    width: 9em; 
 
    margin-right: 1em; 
 
    height: 12em; 
 
    text-align: center; 
 
} 
 
li a { 
 
    display: inline-block; 
 
} 
 
li img { 
 
    height: 8em; 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<ul> 
 
    <li> 
 
    <a href='#'> 
 
     <img alt='' src='https://upload.wikimedia.org/wikipedia/commons/e/e2/Merton_College_Oxford_Coat_Of_Arms.svg' /> 
 
    </a> 
 
    <a href='##'>Merton</a> 
 
    </li> 
 
</ul>

正直に言うと、これはexacty働く理由しかし、私は完全にはよく分かりません。実際には、余分な行は、<a>がインラインブロックでないときから来ます。

Answer 2

を使用すると、リンクが同じ位置に行くされている場合と仮定すると考えることができ別の代替方法は、リンクにoutline:noneを追加するだけでなく、上のホバー/フォーカス効果を追加していますアウトラインを削除したくない場合は、アクセシビリティ

ためCodepenhttp://codepen.io/noobskie/pen/ojXYgo