Modernizr CSS-Regel ignoriert von Safari (auch mobile Safari)

Question

Ich kann nicht herausfinden, warum Safari/Mobile Safari eine Codezeile ignoriert, die die .generatedcontent Regel von Modernizr verwendet, um Icons mit icomoon auszublenden. Sie können die Live-Site unter http://importbible.com/ anzeigen. Die Symbole befinden sich auf der Fußzeile der Seite. Der Browser wird in Chrome perfekt gerendert. Bei einigen weiteren Tests schlägt Safari 5.1.2 fehl, während Safari 6.0.1 funktioniert. iPad läuft 4.3 schlägt fehl. Die Linie in Frage:

.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

diese dort werfen als eine Debug-Option, wenn sonst nichts. Haben Sie versucht, einen Platzhalter für .icons zu verwenden?

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

oder

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

EDIT: Freitag Ihre Seite wurde ein Timeout, so konnte ich es nicht sehen. Heute erhalte ich die folgenden Fehler (Safari 5.1.2/MAC):

1. XMLHttpRequest nicht http://static.ak.fbcdn.net/rsrc.php/v2/yy/r/5SjacuFVbni.js laden kann. Origin http://www.facebook.com ist nicht zulässig von Access-Control-Allow-Origin. oauth
2. Fehler beim Laden der Ressource: Der Server reagierte mit einem Status von 407 (Proxy-Authentifizierung Erforderlich) // Dies ist wahrscheinlich an meinem Ende.

Und ich sehe 6 Symbole unter "Connect".

Ich habe kein Problem, die URL in Fehlerzeile # 1 direkt (Safari oder Chrome) zu durchsuchen.

Answer 2

Es sieht so aus, als ob <span class="icon-facebook">1</span> Ihr Backup für Browser ist, die generierten Inhalt nicht unterstützen. Ich würde vorschlagen, die Sicherung standardmäßig (durch CSS) zu verstecken, und lassen Sie Javascript Ihre Backup-Icons für Browser anzeigen, die generierten Inhalt nicht unterstützen. Entweder mit der Klasse "no-generatedcontent" von Modernizr oder der von IcoMoon bereitgestellten IE7-Javascript-Datei.

Mit Modernizr:

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

Oder die lte-ie7.js Datei von IcoMoon geliefert. Bei Verwendung dieser Methode müssen Sie kein zusätzliches Markup verwenden (verwenden Sie einfach <span class="icon-facebook-b"> ohne das Backup <span class="icon-facebook">1</span>).

/* 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

Im Moment zeigt Chrome Fußzeilen soziale Symbole gut, aber in Safari 5.1.7 gibt es überhaupt keine Symbole.

Eine andere Sache, die ich bemerkt habe, ist, dass mehrere CSS-Dateien zweimal angewendet werden (minimiert und unformatiert). Siehe Zeile 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" /> 

Und Linien 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' /> 

Sieht aus wie Safari Wild auf dieser besonderen Frage kommt.