لا يمكنك التخلص من الخطوط العريضة المنقطة في روابط Firefox؟

Question

لدي قائمة مليئة بـ IMGs:

<ul>
<li><a href="#"><img src="test.png" /></a</li>
<li><a href="#"><img src="test.png" /></a</li>
<li><a href="#"><img src="test.png" /></a</li>
(...)
</ul>

عندما أنقر عليها في Firefox ، هناك مخطط منقط (من اخترع ذلك ولماذا؟ قبيح جدًا!).

أرغب في التخلص منها ، لكن "الخطوط العريضة" ، وما إلى ذلك لا يبدو أنه يعمل ، لقد جربت كل الخيارات أدناه:

#ul li img:active {
    -moz-outline-style: none;
    -moz-focus-inner-border: 0; 
    outline: none;
    outline-style: none;
}     

#ul li img:focus {
    -moz-outline-style: none;
    -moz-focus-inner-border: 0; 
    outline: none;
    outline-style: none;
}

 #ul li img a:active {
        -moz-outline-style: none;
        -moz-focus-inner-border: 0; 
        outline: none;
        outline-style: none;
    }     

    #ul li img a:focus {
        -moz-outline-style: none;
        -moz-focus-inner-border: 0; 
        outline: none;
        outline-style: none;
    }

Answer 1

تحتاج إلى تطبيق الأنماط على <a> علامة (قاعدتك الأخيرة من CSS خاطئين لأنك وضعت <a> علامة في الداخل <img>.

هذا يعمل بالنسبة لي:

a:active,
a:focus {
  outline: none;
  -moz-outline-style: none;
}

أو ، فقط داخل العنصر مع معرف ul (ليس أفضل اسم ، بالمناسبة):

#ul a:active,
#ul a:focus {
  outline: none;
  -moz-outline-style: none;
}

Answer 2

a:active,
a:focus {
  outline: none;
  -moz-outline-style: none;
}

يعمل بالنسبة لي في FF22

Answer 3

الخطوط العريضة: 0 يجب أن تفعل ذلك ويجب تطبيقه على <a> العنصر ، الذي ليس في الواقع طفل <img />. <img /> هو طفل <a> لذلك يجب أن تقرأ CSS:

#ul li a {
    outline: 0;
}