Regola CSS Modernizr ignorata da Safari (Mobile Safari pure)

Non riesco a capire perché Safari/Mobile Safari ignora una riga di codice che utilizza la regola .generatedcontent di Modernizr per nascondere le icone usando icomoon. È possibile visualizzare il sito dal vivo a http://importbible.com/ le icone sono sul piè di pagina della pagina. Il browser si adatta perfettamente su Chrome. Ancora un po 'di test, Safari 5.1.2 fallisce mentre Safari 6.0.1 funziona. L'iPad con 4.3 non funziona. La linea in questione è:Regola CSS Modernizr ignorata da Safari (Mobile Safari pure)

.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; }

fonte

2012-10-14 David Nguyen

Mi stai dicendo che gli stili calcolati non lo mostrano per nessun elemento che corrisponde al selettore? – Ohgodwhy

Che è corretto @Ohgodwhy –

Non riesco a replicare questo bug in Safari 5.1.2 Mac. Caricando la tua pagina usando l'estensione BetterSource Safari per mostrare la fonte dopo il rendering, vedo la classe "generatecontent" nel tag come previsto. –

Lanciare questa là fuori come un opzione di debug, se non altro. Hai provato a utilizzare un carattere jolly per .icons?

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

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

EDIT: Venerdì tua pagina è stata cronometrando fuori, così non ho potuto vederlo. Oggi sto ottenendo i seguenti errori (Safari 5.1.2/MAC):

XMLHttpRequest non può caricare http://static.ak.fbcdn.net/rsrc.php/v2/yy/r/5SjacuFVbni.js. Origine http://www.facebook.com non è consentito dalla Access-Control-Allow-Origin. oauth
Impossibile caricare la risorsa: il server ha risposto con uno stato di 407 (Autenticazione proxy obbligatoria) // Probabilmente è dalla mia parte.

E vedo 6 icone sotto "Connetti".

Non ho alcun problema di navigazione per l'URL nella linea di errore # 1 direttamente (Safari o Chrome).

fonte

2012-10-18 15:33:36 Dawson

Grazie Dawson, mi dispiace per aver impiegato così tanto tempo a ricontrollare questo. Sembra che a Safari non piacesse il selettore extra lungo. Sostituendolo con quello nella risposta funziona. –

Sembra 1 è il backup per i browser che non supportano contenuto generato. Suggerirei di nascondere il back-up per impostazione predefinita (tramite CSS) e di lasciare in javascript le icone di backup per i browser che non supportano il contenuto generato. O utilizzando la classe "no-generatedcontent" di Modernizr o il file javascript IE7 fornito da IcoMoon.

Utilizzando Modernizr:

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

o il file lte-ie7.js fornito da IcoMoon. Usando questo metodo non si dovrebbe usare markup extra (basta usare  senza il backup 1).

/* 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]]); 
     } 
    } 
};

fonte

2012-10-22 09:41:15

In questo momento Chrome mostra le icone sociali del piè di pagina, ma in Safari 5.1.7 non ci sono icone.

Un'altra cosa che ho notato è che diversi file CSS vengono applicati due volte (minificato e semplice). Vedere linea 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" />

E linee 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' />

Sembra che Safari si scatena su questa particolare questione.

fonte

2012-10-23 15:49:50 gkond

Regola CSS Modernizr ignorata da Safari (Mobile Safari pure)

risposta

Problemi correlati