आईई: केवल एंकर का हिस्सा क्लिक करने योग्य

Question

मैं एक विशिष्ट ऊंचाई और चौड़ाई के साथ एक एंकर रखना चाहता हूं।

इस पर कोई टेक्स्ट नहीं है क्योंकि यह पृष्ठ के किसी निश्चित क्षेत्र के सामने रखा जाना है।

<a href="/" style="width:370px;height:80px;display:block;position:absolute;"></a> 

यह सब कुछ लेकिन IE6 और IE7 में ठीक काम कर रहा है:

यहाँ कोड है। अगर मैं सीमा जोड़ता हूं, तो मैं देख सकता हूं कि एंकर का सही आकार है, लेकिन अगर मैं इसे क्लिक करने का प्रयास करता हूं, केवल शीर्ष भाग क्लिक करने योग्य होगा।

मुझे नहीं पता कि यह ऐसा क्यों कर रहा है। मैंने एक चेतावनी के साथ भी एक क्लिक को जोड़ने की कोशिश की, और वही बात, एंकर के निचले भाग पर क्लिक करना असंभव है।

यह वास्तव में अजीब है, क्या इससे पहले किसी के साथ ऐसा हुआ? कुछ भी मदद करेगा।

Answer 1

आईई के पिछले संस्करणों में, ब्लॉक स्तर तत्वों पर ऑनक्लिक घटना को पंजीकृत करना संभव नहीं है। इसके बजाए, आईई ब्लॉक के अंदर पाठ या इनलाइन तत्वों पर क्लिक करता है।

मुझे पता चला है कि एंकर के अंदर transparent image डालने वाला एक ही आकार है जो पूर्ण एंकर पर क्लिक करेगा।

<a href="/" style="width:370px;height:80px;display:block;position:absolute;"> 
    <img src="Transparent.gif" style="width: 370px; height: 80px"/> 
</a> 

Answer 2

यह हो सकता है कि यह एक अन्य div/span/etc के साथ एक जेड-इंडेक्स मुद्दा है।

Answer 3

के बाद से इस लिंक पर यह मेरे लिए लग रहा है एक और ब्लॉक आंशिक रूप से यह इस प्रकार ओवरलैपिंग क्लिक करें घटना से आधा छुपा नहीं है की तरह बिल्कुल स्थिति में है।

Answer 4

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

इसका मतलब है कि आप किसी स्प्राइट या अन्य छवि का उपयोग कर सकते हैं जो पहले से ही आपके सर्वर पर एक और कॉल सहेजने के लिए पृष्ठ पर लोड हो रहा है।

<a style="position:absolute; z-index:2; background:url(/images/your-sprite.gif) -9999px no-repeat;" href="#">Your anchor</a> 

Answer 5

इस मुद्दे से निपटने का एक और तरीका एक छोटे से "हैक/वैकल्पिक हल", जब ब्लॉक तत्व एक पृष्ठभूमि रंग सब कुछ मिला है, ठीक है के रूप में आप पहलू यह है। इस तरह कुछ का उपयोग करें:

a { 
    .. 
    background-color: white; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    .. 
}