सीएसएस - बटन समय-समय पर अनजान हैं?

Question

मेरे पास एकाधिक एंकर तत्व हैं। एक बार उन पर क्लिक करने पर कुछ भी नहीं होता है, सभी सीएसएस एनिमेशन काम करते हैं लेकिन लिंक किसी भी पेज को खोल नहीं रहे हैं/किसी भी क्रिया को ट्रिगर नहीं कर रहे हैं। मुझे कर्सर को थोड़ा स्थानांतरित करना है और फिर फिर से क्लिक करना है।

मुझे यकीन है कि यह एक सीएसएस मुद्दा है, लेकिन मुझे अपने सीएसएस में कुछ भी गलत नहीं मिल रहा है। मुझे लगता है कि समस्या मार्जिन में हो सकती है (4 पीएक्स नीचे मार्जिन लेकिन 4 पीएक्स टॉप मार्जिन पर: सक्रिय) लेकिन मैंने इसे कई वेबसाइटों पर देखा है और बटन ठीक काम कर रहे थे ...

यहां बटन हैं। उन पर क्लिक करें, लगभग 20 क्लिकों में से एक काम नहीं करता है (कभी-कभी यह पहले क्लिक के साथ होता है):

http://jsfiddle.net/4nz4v/ (ध्यान दें कि बटन कैसे प्राप्त नहीं हो रहे हैं। क्लिक के बाद सक्रिय वर्ग, दोनों नवीनतम ओपेरा में इसका परीक्षण किया गया है और

.button { 
    display: inline-block; 
    vertical-align: top; 
    color: #000; 
    background: #aaa; 
    text-shadow: 1px 1px 1px #fff; 
    border: 0; 
    padding: 0.6em 1.2em; 
    margin: 0 0 4px 0; 
    text-decoration: none; 
    border-radius: 6px; 
} 

.button:hover { 
    color: #fff; 
    text-shadow: none; 
} 

.button:active { 
    margin: 4px 0 0 0; 
} 

.active { 
    background: #fff; 
    text-shadow: none; 
    color: #000; 
} 

धन्यवाद: क्रोम)

यहाँ सीएसएस है।

Answer 1

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

.button:active { 
    margin: 4px 0 0 0; 
} 

उपर्युक्त कोड को हटाने से समस्या हल हो जाती है। मैं इस कोड को हटा दूंगा और अधिक लगातार परिणामों के लिए अपने माता-पिता को पैडिंग जोड़ दूंगा।

Answer 2

मिले एक समाधान: mouseup या mousedown का उपयोग click के बजाय:

$('.button').mouseup(function() { 
    $(this).siblings().removeClass('active'); 
    $(this).addClass('active'); 
}); 

http://jsfiddle.net/4nz4v/3/

Answer 3

यह एक बग है। यह बहुत संगत है: आपको बस यह पता लगाना होगा कि यह कौन सी पंक्ति है जो अनजान है। अपने JSFiddle को दोबारा जांचें, और पाठ के नीचे पंक्ति 2 या 3 पिक्सल खोजें। यही वह जगह है जहां आप इसे क्लिक नहीं कर सकते - बिल्कुल। यदि आप इसे नहीं ढूंढ पा रहे हैं, तो अपने कर्सर को बटन के नीचे से ऊपर तक धीरे-धीरे, एक पिक्सेल को प्रत्येक पिक्सेल पर क्लिक करके ले जाएं।

अनजान क्षेत्र क्षैतिज रूप से लगातार है; पूरी पिक्सेल पंक्ति अनजान है। मुझे प्रति बटन अधिकतम दो अक्केक्टेबल पिक्सेल पंक्तियां मिली हैं, यदि दोनों शीर्ष और निचले पैडिंग को संशोधित किया गया है।

बग तब होता है जब बटन या लिंक की पैडिंग/मार्जिन/सीमा :active स्थिति पर संशोधित होती है।

यह सूचना दी जाना चाहिए, अपने JSFiddle, यहाँ के साथ:

• https://bugs.webkit.org/enter_bug.cgi
• https://code.google.com/p/chromium/issues/list -> 'नया मुद्दा'।