Resim linklerim neden garip şekilli bir tasarıma sahip?

Question

Sınır ben sevmediğim o üstündeki onun sadece garip bit görünen umursamıyorum. Ben tamamen outline: 0 kullanarak sınırın kurtulmak, bunun geçici bir çözüm biliyorum, ama ben de that's bad biliyorum.

HTML kurulum

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

CSS bir özü olduğunu: (. Ikisi tek bir <a> kombine eğer etkisi benzerdir)

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

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

bence Bu, resmin display: block kullanılarak ilgilidir. http://jsfiddle.net/pvd69wce/

Answer 1

yardım etmek gibi resim altındaki bağlantıyı vurgulamak için, bir çözümvermektir <a> için.

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>

Bu exacty çalışır neden tamamen emin değilim gerçi dürüst olmak gerekirse. Gerçekten de, <a> satır içi bloğu olmadığında fazladan satırların geldiği yer de.

Answer 2

Eğer bağlantılar bağlantısına outline:none ekliyor aynı konumda olacak eğer varsayarak aynı zamanda bir hover ekleme hakkında düşünebilirim diğer alternatif yolu/etkiye odaklanmak: Burada konuyu yeniden ettik Eğer anahat kaldırmak istemiyorsanız erişilebilirlik

için Codepenhttp://codepen.io/noobskie/pen/ojXYgo