क्रोम में स्प्राइट छवि के चारों ओर सीमा हटाएं

Question

इस तकनीक का उपयोग करने में पहली बार ऐसा लगता है कि इस बात पर ध्यान दिए बिना कि सीमा को असाइन करने का मैं कौन सा गुण क्रोम में नहीं जाऊंगा। अन्य ब्राउज़र्स ठीक हैं। मैंने रूपरेखा की कोशिश की है: कोई नहीं, सीमा: 0; आदि, आदि। छवि के चारों ओर एक रंगीन सीमा जोड़ने की भी कोशिश की, और देखा कि काला सीमा अभी भी रंगीन सीमा के भीतर थी। ऐसा नहीं लगता है कि दूर जाना है।

कार्य-आसपास या सलाह की बहुत सराहना की गई।

.share-link { 
display: block; 
width: 41px; 
height: 32px; 
text-decoration: none; 
background: url("link-icon.png"); 
} 

.share-link:hover { 
background-position: -41px 0; 
} 


<a title="Share this Link" href="#"><img class="share-link"></a> 

Answer 1

ऐसा इसलिए है क्योंकि आप img टैग का उपयोग कर src विशेषता के साथ उपयोग कर रहे हैं। क्रोम अनिवार्य रूप से कंटेनर के आकार को इंगित करता है जिसमें कुछ भी नहीं है।

यदि आप एंकर टैग के बीच कोई छवि नहीं रखना चाहते हैं, तो छवि टैग का उपयोग न करें। टैग के बीच कुछ भी रखना जरूरी नहीं है।

Demo here.

Answer 2

अपने पूछ तो सीमा जो तब onFocus को सक्रिय करता है से छुटकारा पाने के:

*:focus {outline: none;} 

या

.nohighlight:focus { outline:none; } 

इस सीमा से छुटकारा पाने चाहिए।

Answer 3

यह एक क्रोम बग, अनदेखी है "सीमा: कोई नहीं;" अंदाज।

मान लें कि आपके पास एक छवि "डाउनलोड-बटन-102x86.png" है जो आकार में 102x86 पिक्सल है। अधिकांश ब्राउज़रों में, आप उस आकार को इसकी चौड़ाई और ऊंचाई के लिए आरक्षित करेंगे, लेकिन क्रोम बस वहां एक सीमा को चित्रित करता है, इससे कोई फर्क नहीं पड़ता कि आप क्या करते हैं।

तो आप क्रोम को यह सोचने के लिए चालित करते हैं कि वहां कुछ भी नहीं है - 0px द्वारा 0px का आकार, लेकिन बटन के लिए अनुमति देने के लिए बिल्कुल सही "पैडिंग" के साथ। यहां एक सीएसएस आईडी ब्लॉक है जिसका उपयोग मैं इसे पूरा करने के लिए कर रहा हूं ...

#dlbutn { 
    display:block; 
    width:0px; 
    height:0px; 
    outline:none; 
    padding:43px 51px 43px 51px; 
    margin:0 auto 5px auto; 
    background-image:url(/images/download-button-102x86.png); 
    background-repeat:no-repeat; 
} 

व्हायोला! हर जगह काम करता है और क्रोम में रूपरेखा/सीमा से छुटकारा पाता है।

Answer 4

डिफ़ॉल्ट रूप से किसी भी लिंक में लिपटे किसी भी छवि में छवि के चारों ओर एक सीमा होगी (जिस तरह से टेक्स्ट रेखांकित किया गया है)। सीमा निकाला जा रहा है सरल

a image {border: none} or a image {border: 0} 

है जब से मैं कभी नहीं छवि लिंक के चारों ओर बॉर्डर देखने के लिए मैं आमतौर पर हर साइट पर ऊपर सेट मैं विकसित

Answer 5

आप एक बेस 64 बहुत छोटी पारदर्शी छवि का उपयोग कर सकते हैं

<img class="share-link" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/> 

Answer 6

मेरी बेस 64 एम्बेडेड छवियां इसके चारों ओर एक भूरे रेखा को दिखाती रहती हैं इससे कोई फर्क नहीं पड़ता कि मैंने क्या किया। <img> के बजाय <div> का उपयोग करना मेरे लिए काम करता है।

(गलत) इससे पहले कि मैं प्रयोग किया है:

<img class='message-bubble-small'> 

सीएसएस में:

img.message-bubble-small { 
    background-image: url(data:image/png;base64,...); 
    background-size: 16px 16px; 
    width: 16px; 
    height: 16px; 
    float: left; 
} 

के बाद मैं प्रयोग किया है:

HTML में

मैं n HTML:

<div id='message-bubble-small'> 

सीएसएस में

:

#message-bubble-small { 
    background-image: url(data:image/png;base64,...); 
    background-size: 16px 16px; 
    width: 16px; 
    height: 16px; 
    float: left; 
} 

पिछले उदाहरण मैं क्रोम में कोई और अधिक ग्रे लाइनों है साथ

।