Chrome中的圖像鏈接框關閉

由於我不確切地知道圖像鏈接周圍的框是如何調用的，因此我很難研究此問題。Chrome中的圖像鏈接框關閉

我有一個文本組件上的WordPress網站這個簡單的，基本的代碼：

<a href="https://www.facebook.com/ShiversShavedIce"><img src="http://shiversshavedice.com/wp-content/uploads/2015/01/facebook.png" title="Shivers Shaved Ice on Facebook" /></a> 
<a href="http://twitter.com/shiverstexas"><img src="http://shiversshavedice.com/wp-content/uploads/2015/01/twitter.png" title="Shivers Shaved Ice on Twitter" /></a> 
<a href="http://instagram.com/shiverstexas"><img src="http://shiversshavedice.com/wp-content/uploads/2015/01/instagram.png" title="Shivers Shaved Ice on Instagram" /></a> 
<a href="http://visitor.r20.constantcontact.com/d.jsp?llr=sn7abbnab&p=oi&m=1113504903602&sit=8kb6nh8hb&f=37e341e0-2a18-443e-9467-cedf64a6e113"><img src="http://shiversshavedice.com/wp-content/uploads/2015/01/newsletter.png" title="Keep Up With Us!" /></a> 
<a href="mailto:[email protected]"><img src="http://shiversshavedice.com/wp-content/uploads/2015/01/email.png" title="Email Shivers" /></a>

在Firefox中正常工作。當你點擊其中一個鏈接時，圖像周圍會出現一種類型的行軍螞蟻類型框，只有螞蟻沒有行進。

enter image description here

但在Chrome中，鏈接框啄顯示出來的圖像鏈接下方：

enter image description here

我在Mac上，第一屏蓋是我的，第二個是客戶端在PC上。看起來這會是某種浮動問題？但這是一個非常基本的WordPress主題，並沒有被定製。我認爲這些鏈接在Chrome的情況下仍然可以正常工作，但下面顯示的框看起來不太好，有點讓人分心。

謝謝，我知道這可能是超級基本的，我只是有點失落。

來源

2015-02-10 Jessica W.

周圍的框被稱爲輪廓...它是由鏈接上的焦點狀態觸發的屬性。這個問題可能是另一個CSS的問題。 – DaniP 2015-02-10 21:10:45

也請包括您擁有的相關HTML的CSS。它看起來像你只需要在你的CSS中設置「{display：inline-block}」。查看showdev上面的鏈接，獲得更深入的答案。 – TylerH 2015-02-13 20:31:26

單像素寬灰色輪廓是瀏覽器中默認的:focus樣式。您可以使用標籤上的display: inline-block;修復輪廓的佈局。這將使他們的佈局擴大到包裝img元素。

雖然不是最精確的CSS選擇器，但你可以做這樣的事情。

.widget-area .textwidget a { 
    display: inline-block; 
}

此外，您可以使用CSS自定義輪廓樣式。

.widget-area .textwidget a:focus { 
    outline: 0 none; 
    /*Some other styles here.*/ 
}

來源

2015-02-10 21:12:03

YEP +1擊敗了我....另一個選擇器可以是'.textwidget> a' – DaniP 2015-02-10 21:14:20

非常感謝，我很高興你的答案，亞歷山大，但是在這裏還沒有影響力。 – 2015-02-12 02:56:39

@ AlexanderO'Mara謝謝！內聯塊解決方案非常完美。 – 2015-02-13 05:23:10

Chrome中的圖像鏈接框關閉

回答

相關問題