Reguła CSS Modernizatora zignorowana przez Safari (także Safari dla urządzeń mobilnych)

Nie mogę zrozumieć, dlaczego Safari/Mobile Safari ignoruje linię kodu, która używa reguły Modernizr's .generatedcontent do ukrywania ikon za pomocą icomoon. Możesz zobaczyć stronę na żywo pod http://importbible.com/ ikony znajdują się w stopce strony. Przeglądarka działa idealnie w Chrome. Przeprowadzono więcej testów, Safari 5.1.2 nie działa, a Safari 6.0.1 działa. iPad działający w 4.3 nie działa. Linia w pytaniu:Reguła CSS Modernizatora zignorowana przez Safari (także Safari dla urządzeń mobilnych)

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

Źródło

2012-10-14 David Nguyen

Czy mówisz mi, że wyliczone style nie pokazują tego dla żadnego elementu pasującego do selektora? – Ohgodwhy

To jest poprawne @Ohgodwhy –

Nie mogłem zreplikować tego błędu w Safari 5.1.2 na Macu. Ładowanie strony za pomocą rozszerzenia Safari BetterSource, aby pokazać źródło po jego wyrenderowaniu, widzę zgodnie z oczekiwaniami klasę "generatedcontent" w tagu . –

rzucanie to tam jako opcja debugowania, jeśli nic innego. Czy próbowałeś użyć wieloznacznika do .icons?

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

lub

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

EDIT: piątek strona została limit czasu, więc nie mogłam go zobaczyć. Dziś Dostaję następujące błędy (Safari 5.1.2/MAC):

XMLHttpRequest nie może załadować http://static.ak.fbcdn.net/rsrc.php/v2/yy/r/5SjacuFVbni.js. Pochodzenie http://www.facebook.com jest niedozwolone przez Access-Control-Allow-Origin. oauth
Załadowanie zasobu nie powiodło się: serwer odpowiedział statusem 407 (Uwierzytelnienie proxy Wymagane) // To prawdopodobnie na moim końcu.

I widzę 6 ikon pod "Połącz".

Nie ma problemu z przeglądaniem adresu URL bezpośrednio w wierszu nr 1 (Safari lub Chrome).

Źródło

2012-10-18 15:33:36 Dawson

Dzięki Dawson, przepraszam, że tak długo to sprawdzam. Wygląda na to, że Safari nie lubi dodatkowego selektora. Zastąpienie go tym w odpowiedzi działa. –

Wygląda na to, że 1 to kopia zapasowa dla przeglądarek, które nie obsługują wygenerowanej treści. Proponuję domyślnie ukryć kopię zapasową (przez CSS) i pozwolić javascript wyświetlić ikony kopii zapasowych dla przeglądarek, które nie obsługują wygenerowanej treści. Albo przy użyciu klasy "no-gene- rowany" Modernizr, albo pliku javascript IE7 dostarczonego przez IcoMoon.

Korzystanie modernizr:

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

lub plik lte-ie7.js dostarczane przez IcoMoon. Korzystając z tej metody, nie trzeba używać dodatkowych znaczników (wystarczy użyć  bez kopii zapasowej 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]]); 
     } 
    } 
};

Źródło

2012-10-22 09:41:15

W tej chwili Chrome pokazuje stopki ikon społecznościowych dobrze, ale w Safari 5.1.7 nie ma żadnych ikon.

Kolejną rzeczą, którą zauważyłem jest to, że kilka plików CSS jest nakładanych dwukrotnie (minified i plain). Patrz linia 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" />

i linie 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' />

Wygląda Safari dostaje dziko w tej konkretnej sprawie.

Źródło

2012-10-23 15:49:50 gkond

Reguła CSS Modernizatora zignorowana przez Safari (także Safari dla urządzeń mobilnych)

Odpowiedz

Powiązane problemy