मैं हाइपरलिंक छवियों के आसपास की रूपरेखा कैसे निकाल सकता हूं?

Question

जब हम CSS का उपयोग करके टेक्स्ट रिप्लेसमेंट का उपयोग करते हैं और एक नकारात्मक परीक्षण-इंडेंट देते हैं text-indent:-9999px। फिर जब हम उस लिंक पर क्लिक करते हैं तो डॉटेड लाइन नीचे दी गई नमूना छवि की तरह दिखाई देती है। इसके लिए क्या उपाय है?

Comments

कृपया इसे न निकालें, यह एक्सेसिबिलिटी के लिए है।

outlinenone.com

डुप्लिकेट: stackoverflow.com/questions/1142819/… (लेकिन कृपया ऊपर पहुंच की टिप्पणियां देखें!)

— JohnB

मैं गलत खोज शब्द का उपयोग करके इस पर उतरा। मैं इसे पढ़ने के लिए किसी को भी आईई में

— JGallardo

Answer 1

एंकर टैग के लिए निकालें रूपरेखा के लिए

a {outline : none;}

छवि लिंक से रूपरेखा निकालें

a img {outline : none;}

छवि लिंक से बॉर्डर निकालें

img {border : 0;}

Comments

धन्यवाद, डिस्कवर। यह मुझे लंबे समय से परेशान कर रहा था - न केवल IE में हाइपरलिंक किए गए पिक्स, बल्कि नियमित रूप से पिक्स / कोई हाइपरलिंक नहीं। यह तब तक कष्टप्रद था जब तक मुझे आपका जवाब नहीं मिला (Google के माध्यम से, स्टैक नहीं, अजीब तरह से पर्याप्त)।

— जेसन वेबर

Answer 2

आप एंकर तत्व पर "कोई नहीं" सीएसएस संपत्ति "रूपरेखा" और मूल्य का उपयोग कर सकते हैं।

a {
outline: none;
}

उम्मीद है की वो मदद करदे।

Answer 3

Internet Explorer 9 के लिए:

a:active, a:focus { 
 outline: none; 
 ie-dummy: expression(this.hideFocus=true);
}

स्रोत: http://social.msdn.microsoft.com/Forums/en-HK/ieextensiondevelopment/thread/1023adfd-bd73-47ac-ba9c-2bad19ac583a

Comments

यह एकमात्र जब IE में ठीक से काम करता है तो यह लोड पर पेज झिलमिलाहट का कारण बनता है।

— अलेक्सी तेनित्स्की

Answer 4

कृपया ध्यान दें कि फ़ोकस शैलियाँ एक कारण से हैं: यदि आप उन्हें हटाने का निर्णय लेते हैं, तो कीबोर्ड के माध्यम से नेविगेट करने वाले लोग केवल यह नहीं जानते कि अब और क्या ध्यान में है, इसलिए आप अपनी वेबसाइट की पहुँच को नुकसान पहुँचा रहे हैं।

(उन्हें जगह में रखने से बिजली उपयोगकर्ताओं को भी मदद मिलती है जो अपने माउस का उपयोग करना पसंद नहीं करते हैं)

Comments

हम नहीं हटा रहे हैं: फोकस शैली। सिर्फ स्टाइल की रूपरेखा जोड़ना: ऐसा कोई नहीं। अन्य डिफ़ॉल्ट शैली होगी।

— वसीम शेख

फिर "अन्य डिफ़ॉल्ट शैली" क्या है? जहां तक ​​मुझे पता है कि केवल एक ही है, बिंदीदार रेखा।

— वोल्फर

ठीक है .. हम स्क्रीन पाठकों के लिए डिफेंट स्टाइल का उपयोग कर सकते हैं। यह अभिगम्यता के लिए समाधान हो सकता है।

— वसीम शेख

न केवल स्क्रीन रीडर रूपरेखा का उपयोग करते हैं, कुछ लोग ब्राउज़िंग वेबसाइटों को भी पसंद करते हैं जो उनका कीबोर्ड है।

— user2019515

Answer 5

फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर (IE) में समान सीमा प्रभाव है , यह तब दिखाई देता है जब आप किसी लिंक पर क्लिक करते हैं।

यह कोड सिर्फ IE को ठीक करेगा:

a:active { outline: none; }.

और यह एक फ़ायरफ़ॉक्स और IE दोनों को ठीक करेगा :

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

अंतिम कोड को आपकी स्टाइलशीट में जोड़ा जाना चाहिए, यदि आप अपनी साइट से लिंक की सीमाओं को हटाना चाहते हैं।

Comments

धन्यवाद माइक, यह वास्तव में अच्छा जवाब है। लेकिन का उपयोग करना -मोज़-आउटलाइन-शैली: कोई नहीं; मान्य सीएसएस नहीं है। अभी भी यह एक अच्छा विकल्प है

— वसीम शेख

Answer 6

इस कोड को अपनी स्टाइल शीट में शामिल करें

img {border : 0;}

a img {outline : none;}

Answer 7

मुझे आशा है कि यह आप में से कुछ के लिए उपयोगी है, इसका उपयोग लिंक, चित्र और फ्लैश से रूपरेखा को दूर करने के लिए और MSIE 9 से किया जा सकता है:

    a, a:hover, a:active, a:focus, a img, object, embed {
    outline: none;
    ie-dummy: expression(this.hideFocus=true); /* MSIE - Microsoft Internet Explorer 9 remove outline */
    }

नीचे दिया गया कोड छवि सीमा छिपाने में सक्षम है:

    img {
    border: 0;
    }

यदि आप फ़ायरफ़ॉक्स 3.6.8 का समर्थन करना चाहते हैं, लेकिन फ़ायरफ़ॉक्स 4 नहीं ... एक इनपुट प्रकार = छवि पर क्लिक करने से एक बिंदीदार रूपरेखा तैयार हो सकती है, इसे फ़ायरफ़ॉक्स के पुराने संस्करणों में हटाने के लिए निम्नलिखित चाल करेंगे:

   input::-moz-focus-inner { 
   border: 0; 
   }

IE 9 कुछ मामलों में लिंक के आसपास बिंदीदार रूपरेखा को हटाने की अनुमति नहीं देता है जब तक कि आप इस मेटा टैग को अपने और अपने पृष्ठों में शामिल नहीं करते हैं:

     <meta http-equiv="X-UA-Compatible" content="IE=9" />

Comments

@ स्पार्कली मेरा मानना ​​है कि हमें एक जवाब देना चाहिए जो इस सवाल का जवाब दे रहा है कि MSIE सहित सबसे अधिक उपयोग किए जाने वाले ब्राउज़रों में यह कैसे किया जाए क्योंकि यह 2014 में व्यापक रूप से उपयोग किया जाने वाला ब्राउज़र था और एमएस मेटा टैग और सीएसएस पर जानकारी का उपयोग किया जा सकता है MSIE केवल MSIE सहित अधिकांश ब्राउज़रों के लिए समर्थन की पेशकश करने के लिए मेरे जवाब का केवल एक हिस्सा है ... प्रश्न W3C मान्य HTML या CSS के बारे में नहीं था ...

— jagb

@Sparky +1 सही होने के कारण और हमें कभी भी MS css / html / मेटा टैग पर भरोसा नहीं करना चाहिए क्योंकि वे शायद ही कभी W3C मानकों के बारे में सोचते हैं .... मैंने यह नहीं कहा कि Microsoft मेटा टैग और उनके CSS कोड का उपयोग करना अच्छा है केवल ब्राउज़र जो MS कोड का समर्थन करता है, MSIE और संबंधित MS ब्राउज़र हैं। प्रश्न के उत्तर के रूप में "मैं हाइपरलिंक छवियों के आसपास की रूपरेखा कैसे निकाल सकता हूं?"

— जगब

मैंने बस अपनी टिप्पणियों को बताते हुए एक टिप्पणी की।

— स्पार्कली

हालांकि, मैं सोच रहा था कि क्या आप अपने दावे के लिए एक स्रोत का हवाला दे सकते हैं कि यह मेटा टैग "कुछ मामलों" में आवश्यक है ; और वे मामले क्या हो सकते हैं।

— स्पार्कली

कृपया कुछ जानकारी के लिए Microsoft वेबसाइट पढ़ें लेकिन सभी जानकारी नहीं है। स्टैक ओवरफ्लो पर यहाँ बहुत सारे प्रश्न हैं, कुछ प्रश्न इस प्रश्न के ठीक बगल में सूचीबद्ध किए जा सकते हैं .. कुछ मामलों में MSIE / EDGE नहीं कर सकते। ब्राउज़र के रूप में पृष्ठ सामग्री प्रदर्शित नहीं करता है, "कुछ मामलों में" X-UA- संगत मेटा टैग MSIE / EDGE आगंतुकों के लिए उपयोगी है। वहाँ अधिक जानकारी है, एक तय है कि काम करेगा यहाँ मुझे आशा है कि यह आपके लिए उपयोगी जानकारी है

— jagb

Answer 8

यह नवीनतम है जो Google Chrome पर काम करता है

:link:focus, :visited:focus {outline: none;}

Answer 9

-moz-user-focus: ignore; Gecko- आधारित ब्राउज़रों में (आपको इसकी आवश्यकता, महत्वपूर्ण हो सकती है, यह इस बात पर निर्भर करता है कि यह कैसे लागू होता है)

Answer 10

HTML 4.01 के लिए इस तरह का उपयोग करें

<img src="image.gif" border="0">

Answer 11

आप overflow:hiddenपाठ इंडेंट के साथ संपत्ति पर रख सकते हैं, और वह बिंदीदार रेखा, जो पृष्ठ से बाहर निकलती है, गायब हो जाएगी।

मैंने सभी पोस्ट को एक साथ सभी रूपरेखाओं को हटाने के बारे में देखा है। ऐसा करते समय सावधान रहें क्योंकि आप साइट की पहुंच को कम कर सकते हैं।

a:active { outline: none; }

मैं व्यक्तिगत रूप से केवल इस विशेषता का उपयोग करूंगा, जैसे कि :hoverविशेषता में समान सीएसएस गुण हैं, यह उन लोगों के लिए रूपरेखा को रोक देगा जो नेविगेशन के लिए कीबोर्ड का उपयोग कर रहे हैं।

आशा है इससे तुम्हारी समस्या का समाधान हो गया होगा।

Answer 12

डॉटेड आउटलाइन Href लिंक को हटाने के लिए आप अपनी css फाइल में लिख सकते हैं:

a {
   outline: 0;
}

Answer 13

मैं शर्त लगाता हूं कि अधिकांश उपयोगकर्ता उस उपयोगकर्ता के प्रकार नहीं हैं जो कीबोर्ड का उपयोग नेविगेशन नियंत्रण के रूप में करते हैं। क्या यह तब छोटे उपयोगकर्ताओं के बहुमत को नाराज करने के लिए स्वीकार्य है जो कीबोर्ड नेविगेशन का उपयोग करना पसंद करते हैं? संक्षिप्त उत्तर - इस बात पर निर्भर करता है कि आपके उपयोगकर्ता कौन हैं।

इसके अलावा, मैं इस अनुभव को फ़ायरफ़ॉक्स और सफारी में उसी तरह नहीं देखता हूं। तो यह तर्क ज्यादातर IE के लिए लगता है। यह सब वास्तव में आपके उपयोगकर्ता आधार और उनके ज्ञान के स्तर पर निर्भर करता है - वे साइट का उपयोग कैसे करते हैं।

यदि आप वास्तव में जानना चाहते हैं कि आप कहां हैं और आप एक कीबोर्ड उपयोगकर्ता हैं, तो आप हमेशा साइट के माध्यम से कुंजी पट्टी को देख सकते हैं।

Answer 14

यह मेरे लिए पूरी तरह से काम करता है

a img {border:none;}

Answer 15

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

हालाँकि, हर छवि में बॉर्डर = "0" जोड़ने से न केवल समय लगता है, बल्कि फ़ाइल का आकार और डाउनलोड समय भी बढ़ेगा। यदि आप नहीं चाहते हैं कि आपकी कोई भी छवि एक सीमा हो, तो एक सीएसएस नियम या सीएसएस फ़ाइल बनाएं जिसमें नीचे का कोड हो।

img {सीमा-शैली: कोई नहीं; }

Answer 16

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

मेरा सुझाव है कि एक अलग स्टाइलशीट (उदाहरण के लिए, ' Lazyest StyleSheet ' प्लगइन का उपयोग करें ), और मौजूदा प्लगइन (या थीम) -प्रायोजित शैली को ओवरराइड करने के लिए इसके भीतर निम्नलिखित CSS दर्ज करें:

a:hover,a:active,a:link {
    outline: 0 !important;
    text-decoration: none !important;
}

विशिष्ट नियम में ' महत्वपूर्ण ' जोड़ने से यह उत्पन्न करने के लिए प्राथमिकता होगी भले ही नियम कहीं और हो (चाहे यह एक प्लगइन, विषय, आदि में हो)।

यह विकसित होने पर समय बचाने में मदद करता है। निश्चित रूप से, आप मूल स्रोत के लिए खुदाई कर सकते हैं, लेकिन जब आप कई परियोजनाओं पर काम कर रहे हों, या अपडेट करने की आवश्यकता हो (जहां आपके परिवर्तनों को ओवरराइड नहीं किया जा सकता है ! ]), या नए प्लगइन्स या थीम जोड़ें, यह सबसे अच्छा है समय बचाने के लिए संभोग करें।

आशा है कि यह मदद करता है ... शांति!

Answer 17

यदि उपरोक्त समाधान किसी के लिए काम नहीं करता है। इसे भी आजमाइए

a {
 box-shadow: none;
}

Answer 18

हाँ हम उपयोग कर सकते हैं। सीएसएस रीसेट के रूप में a {outline:none}और भी

---

a:focus, a:active {outline:none} सीएसएस को रीसेट करने में सर्वश्रेष्ठ अभ्यास के लिए, सर्वश्रेष्ठ समाधान आम का उपयोग कर रहा है :focus{outline:none}यदि आपके पास अभी भी सर्वश्रेष्ठ विकल्प है तो कृपया साझा करें

Comments

क्या यह अन्य उत्तरों में से एक को स्वीकार नहीं करने के लिए थोड़ा असभ्य नहीं है, जिसकी सामग्री ने आपको अपने निष्कर्ष पर पहुंचाया?

— पेकका