爲什麼我的圖片鏈接有這個奇怪形狀的輪廓？

我不介意邊框出現，它只是我不喜歡的頂部的奇怪位。我知道我可以解決這個問題，通過使用outline: 0完全擺脫邊界，但我也知道that's bad。爲什麼我的圖片鏈接有這個奇怪形狀的輪廓？

的HTML設置是

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

的CSS的提取物：（此效果類似於如果兩個在單個<a>組合）

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

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

我想這與在圖像上使用display: block有關。我在這裏轉載的問題：http://jsfiddle.net/pvd69wce/

來源

2015-09-07 8128

你不能只用大綱：0無; ？ –

我會，但無障礙似乎暗示我不應該（例如[outlinenone.com]（http://www.outlinenone.com/））。 – 8128

@ 8128它表明你不應該，但如果你確實提供了替代的樣式。您仍然可以在文本上使用輪廓或其他樣式（如果它不是圖像的一部分，看起來很可能），並且圖像上沒有輪廓。用戶仍然有反饋，然後 – gabe3886

如果你不想刪除大綱，一種解決方案是給display:inline-block至<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>不是內聯塊時。

來源

2015-09-07 17:23:18

你能想到假設，如果鏈接是要在同一位置被添加到outline:none的聯繫，但也加入了另一種懸停替代方式/對焦點效應圖像以突出它下面的鏈接，以幫助無障礙

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

來源

2015-09-07 16:49:11 NooBskie

爲什麼我的圖片鏈接有這個奇怪形狀的輪廓？

回答

相關問題