विंडोज पर Google क्रोम इन्सेट बॉक्स-छाया बग, मैक पर नहीं: बेहतर कामकाज?

Question

यह अभी भी क्रोम 5.0.375.125 पर चालू है, जो इस लेखन के समय नवीनतम विंडोज रिलीज है।

बग यहाँ पर नज़र रखी है: http://code.google.com/p/chromium/issues/detail?id=25334

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

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

इस हैक के दो भाग। एक छोटी सी जावास्क्रिप्ट (jQuery + jQuery.client प्लगइन):

if ($.client.browser == "Chrome" && $.client.os != "Mac"){ 
    $('html').addClass("inset-radius-hack"); 
}; 

और सीएसएस

#div{ 
    -moz-border-radius: 7px; 
    -webkit-border-radius: 7px; 
    border-radius: 7px; 
    -moz-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset; 
    box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset; 
    padding: 5px 10px; 
    margin-bottom: 10px; 
    max-width: 120px; 
} 

    html.inset-radius-hack #div { 
    border: 2px solid #fff; /* cover the edges with the border 
    margin: 0 -2px 0 -2px; /* and take back the extra pixels the border adds 
    } 

मैं एक शॉवर अब ले सकते हैं? यह हैक मुझे सकल महसूस करता है।

क्या कोई इस के लिए बेहतर कामकाज के साथ आया है?

Answer 1

आप एक सीएसएस हैक के माध्यम से सफारी को लक्षित, बनावट पृष्ठभूमि आप सीमा के लिए एक ही बनावट के लिए उपयोग कर सकते हैं के रूप में द्वारा जे एस भाग से छुटकारा पा सकते (मुश्किल लेकिन कुछ बनावट के लिए काम करता है!):

<style type="text/css"> 
#div{ 
    -moz-border-radius: 7px; 
    -webkit-border-radius: 7px; 
    border-radius: 7px; 
    -moz-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset; 
    box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset; 
    padding: 5px 10px; 
    margin-bottom: 10px; 
    max-width: 120px; 
} 

/* Safari */ 
@media screen and (-webkit-min-device-pixel-ratio:0) 
{ 
    #div{ 
    border: 3px solid #fff; /* cover the edges with the border*/ 
    margin: 0 -3px 0 -3px; /* and take back the extra pixels the border adds*/ 
    -webkit-border-image: url(texture.gif) 4 repeat ; /*add the texture to the border*/ 
    } 
} 
</style>