आईई 7 में एक खाली एंकर टैग क्लिक करने योग्य कैसे करें?

Question

मुझे जावास्क्रिप्ट उपयोग के लिए एक ईवेंट उत्पन्न करने के लिए क्लिक करने योग्य पृष्ठभूमि छवि के भीतर एक क्षेत्र बनाने की आवश्यकता है। तो, मैं एक लंगर टैग बनाया और कहा कि अंदर मैं शब्दार्थ व्यर्थ टैग के बीच कुछ प्रासंगिक पाठ जो मैं तो छिपा हुआ बनाने डाला:

<a href="#"><i>foo</i></a> 

तब मैं एंकर टैग दे दिया 'प्रदर्शन: ब्लॉक' गुण, चौड़ाई और ऊंचाई मूल्यों, और पूरी तरह से इसे स्थान दिया जहां मुझे पृष्ठभूमि छवि के संबंध में होने की आवश्यकता थी। फ़ायरफ़ॉक्स में यह अच्छी तरह से काम करता है - मैं होवर करता हूं और मेरा कर्सर अपेक्षित रूप से बदलता है - मुझे कुछ क्लिक करने योग्य है। आईई 7 हालांकि, इस तथ्य को पसंद नहीं करता है कि एंकर टैग 'खाली' है और इसलिए इसे क्लिक करने योग्य नहीं माना जाता है। तो मैं सीएसएस में एंकर टैग को यह कहा:

background:url(/no-image.jpg); 

... जो कुछ संभालने में IE7 मूर्ख लगता है। आईई 7 अब क्षेत्र को क्लिक करने योग्य के रूप में मानता है, भले ही एंकर टैग के लिए कोई पृष्ठभूमि छवि वास्तव में मौजूद न हो। लेकिन यह मेरे लिए एक हैक की तरह लगता है और मैं सोच रहा हूं कि इस समस्या से निपटने के लिए एक और शानदार तरीका है या नहीं। किसी भी विचार की बहुत प्रशंसा की जाएगी। धन्यवाद।

Answer 1

अर्थात् अर्थहीन टैग से छुटकारा पाएं और इसके बजाय सामान्य सीएसएस छवि प्रतिस्थापन का उपयोग करें।

<a href="#">foo</a> 

और फिर सीएसएस:

a { 
    width:100px; 
    height:100px; 
    display:block; 
    text-indent:-9999px; 
    background:url(/img.png) no-repeat; 
} 

जोड़े जो कुछ भी स्थिति आप की जरूरत है, और यह ठीक काम करना चाहिए।

Answer 2

इसके बजाए एक डीआईवी क्लिक करने योग्य बनाएं। यदि यह जावास्क्रिप्ट को कॉल कर रहा है, तो आपको बिल्कुल एंकर टैग की आवश्यकता नहीं है।

यदि आवश्यक हो तो आप बिल्कुल स्थिति बना सकते हैं।

<div onclick="alert('moo')" style="height;100px;width:100px;cursor:pointer"></div> 

Answer 3

आपको आईई के साथ एक प्रतिपादन समस्या मिली है, और इस मुद्दे के नीचे @ सिमॉन के अनुसार कम से कम आईई 9 के माध्यम से मौजूद है।

आपका background: हैक काम करेगा, लेकिन ब्राउजर फर्जी यूआरएल को हल करने के लिए प्रत्येक बार एक HTTP अनुरोध करेगा। यह आपके पृष्ठ के प्रदर्शन को चोट पहुंचा सकता है। एक ही परिणाम प्राप्त करने के लिए, लेकिन एक अनावश्यक HTTP अनुरोध नहीं करते हैं, तो मैं बजाय इस URL उपयोग करने का सुझाव चाहते हैं:

background-image:url(about:blank); 

about:blank, एक विशेष URL कि ब्राउज़रों एक खाली पेज के रूप में दिखाई है, इसलिए यह कैसे प्रभावित नहीं करेगा तत्व प्रदर्शित होता है, लेकिन यह किसी भी HTTP अनुरोध को भी नहीं बनाएगा।

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

Answer 4

मुझे आईई 9 में और हाल ही में नीचे एक मुद्दा था जहां एंकर टैग के आसपास क्लिक करने योग्य क्षेत्र काम नहीं करता था। मेरे लिए कोई भी सामान्य संकल्प काम नहीं करता है।

html { 
position:relative; 
z-index:-1001; 
} 

z- सूचकांक आदेश अन्य ब्राउज़रों में से IE में अलग है: क्या मैंने पाया काम किया HTML तत्व को यह शैली जोड़ने था।