सफारी (मोबाइल सफारी भी) द्वारा अनदेखा मॉडर्निजर सीएसएस नियम

Question

मुझे पता नहीं लगा सकता है कि क्यों सफारी/मोबाइल सफारी कोड की एक रेखा को अनदेखा कर रही है जो आधुनिकता के .generatedcontent नियम का उपयोग आईकॉमून का उपयोग करके आइकन छिपाने के लिए करता है। आप लाइव साइट को http://importbible.com/ पर देख सकते हैं आइकन पृष्ठ के पाद लेख पर हैं। ब्राउजर पूरी तरह से क्रोम पर प्रस्तुत करता है। कुछ और परीक्षण किया, सफारी 5.1.2 विफल रहता है जबकि सफारी 6.0.1 काम करता है। 4.3 चल रहा है आईपैड विफल रहता है। सवाल में लाइन है:

.generatedcontent .icon-gplus, .generatedcontent .icon-facebook, .generatedcontent .icon-twitter, .generatedcontent .icon-feed, .generatedcontent .icon-youtube, .generatedcontent .icon-flickr, .generatedcontent .icon-deviantart, .generatedcontent .icon-tumblr, .generatedcontent .icon-share, .generatedcontent .icon-tag, .generatedcontent .icon-home, .generatedcontent .icon-news, .generatedcontent .icon-cart, .generatedcontent .icon-cart, .generatedcontent .icon-basket, .generatedcontent .icon-mail, .generatedcontent .icon-clock, .generatedcontent .icon-forward, .generatedcontent .icon-replay, .generatedcontent .icon-chat, .generatedcontent .icon-refresh, .generatedcontent .icon-magnifier, .generatedcontent .icon-zoomin, .generatedcontent .icon-expand, .generatedcontent .icon-cog, .generatedcontent .icon-trash, .generatedcontent .icon-list, .generatedcontent .icon-grid, .generatedcontent .icon-download, .generatedcontent .icon-globe, .generatedcontent .icon-link, .generatedcontent .icon-attachment, .generatedcontent .icon-eye, .generatedcontent .icon-star_empty, .generatedcontent .icon-star_half, .generatedcontent .icon-star, .generatedcontent .icon-heart, .generatedcontent .icon-thumb, .generatedcontent .icon-cancel, .generatedcontent .icon-left, .generatedcontent .icon-right { display: none !important; }

Answer 1

इस बाहर फेंकने एक डिबगिंग विकल्प के रूप में, अगर और कुछ नहीं। क्या आपने .icons के लिए वाइल्डकार्ड का उपयोग करने का प्रयास किया है?

[class*='icon-'] { display:none !important } 

या

[class^='icon-'] { display:none !important } 

संपादित करें: शुक्रवार को अपने पृष्ठ बाहर समय किया गया था, तो मैं इसे देखने नहीं कर सका। आज मैं निम्नलिखित त्रुटियों (सफारी 5.1.2/मैक) हो रही है:

1. XMLHttpRequest http://static.ak.fbcdn.net/rsrc.php/v2/yy/r/5SjacuFVbni.js लोड नहीं कर सकता। उत्पत्ति http://www.facebook.com एक्सेस-कंट्रोल-अनुमति-उत्पत्ति द्वारा अनुमत नहीं है। oauth
2. संसाधन लोड करने में विफल: सर्वर ने 407 (प्रॉक्सी प्रमाणीकरण आवश्यक) की स्थिति का जवाब दिया // यह शायद मेरे अंत में है।

और मैं "कनेक्ट" के तहत 6 आइकन देख रहा हूं।

मुझे त्रुटि रेखा # 1 सीधे (सफारी या क्रोम) में यूआरएल पर ब्राउज़ करने में कोई समस्या नहीं है।

Answer 2

ऐसा लगता है कि <span class="icon-facebook">1</span> उन ब्राउज़रों के लिए आपका बैकअप है जो जेनरेट की गई सामग्री का समर्थन नहीं करते हैं। मैं डिफ़ॉल्ट रूप से बैक-अप को छिपाने का सुझाव दूंगा (सीएसएस के माध्यम से), और जावास्क्रिप्ट को उन ब्राउज़रों के लिए अपने बैकअप आइकन दिखाएं जो जेनरेट की गई सामग्री का समर्थन नहीं करते हैं। या तो Modernizr की "नो-जेनरेटेडेंटेंट" कक्षा, या IcoMoon द्वारा प्रदान की गई आई 7 जावास्क्रिप्ट फ़ाइल का उपयोग करके।

Modernizr का उपयोग करना:

.icon-facebook { display: none; } 
.no-generatedcontent .icon-facebook {display: inline; } 

या lte-ie7.js फ़ाइल IcoMoon द्वारा आपूर्ति की। इस विधि का उपयोग करने के लिए आपको अतिरिक्त मार्कअप का उपयोग नहीं करना पड़ेगा (बैकअप <span class="icon-facebook">1</span> के बिना बस <span class="icon-facebook-b"> का उपयोग करें)।

/* Use this script if you need to support IE 7 and IE 6. */ 

window.onload = function() { 
    function addIcon(el, entity) { 
     var html = el.innerHTML; 
     el.innerHTML = '<span style="font-family: \'icomoon\'">' + entity + '</span>' + html; 
    } 
    var icons = { 
      'icon-home' : '&#x21;', 
      'icon-home-2' : '&#x22;', 
      'icon-newspaper' : '&#x23;', 
      'icon-pencil' : '&#x24;', 
      'icon-pencil-2' : '&#x25;' 
     }, 
     els = document.getElementsByTagName('*'), 
     i, attr, html, c, el; 
    for (i = 0; i < els.length; i += 1) { 
     el = els[i]; 
     attr = el.getAttribute('data-icon'); 
     if (attr) { 
      addIcon(el, attr); 
     } 
     c = el.className; 
     c = c.match(/icon-[^\s'"]+/); 
     if (c) { 
      addIcon(el, icons[c[0]]); 
     } 
    } 
}; 

Answer 3

अभी क्रोम पाद लेख सामाजिक आइकन ठीक दिखाता है, लेकिन सफारी 5.1.7 में कोई आइकन नहीं है।

मैंने देखा है कि एक और चीज यह है कि कई सीएसएस फाइलों को दो बार (मिनीफाइड और सादा) लागू किया जाता है। लाइन 73 देखें:

<link rel='stylesheet' type='text/css' media='screen' href="http://importbible.com/wp-content/plugins/bwp-minify/min/?f=wp-content/themes/import_bible_5.3/css/bs-responsive.css,wp-content/themes/import_bible_5.3/css/rating.css,wp-content/themes/import_bible_5.3/style.css&amp;f22064" /> 

और लाइनों 420-422: की तरह सफारी इस विशेष मामले पर जंगली हो जाता है

<link rel='stylesheet' id='bootstrap-rs-css' href="http://importbible.com/wp-content/themes/import_bible_5.3/css/bs-responsive.css?f22064" type='text/css' media='screen' /> 
<link rel='stylesheet' id='rating-css' href="http://importbible.com/wp-content/themes/import_bible_5.3/css/rating.css?f22064" type='text/css' media='screen' /> 
<link rel='stylesheet' id='style-css' href="http://importbible.com/wp-content/themes/import_bible_5.3/style.css?f22064" type='text/css' media='screen' /> 

लग रहा है।