7

.generatedcontenticomoon を使用してアイコンを非表示にするためにModernizr のルールを使用するコード行を Safari/Mobile Safari が無視する理由がわかりません。http://importbible.com/でライブ サイトを表示できます。アイコンはページのフッターにあります。ブラウザは Chrome で完全にレンダリングされます。さらにテストを行ったところ、Safari 5.1.2 は失敗し、Safari 6.0.1 は動作します。4.3 を実行している iPad が失敗します。問題の行は次のとおりです。

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

4

3 に答える 3

3

他に何もなければ、これをデバッグオプションとしてそこに投げ出します。にワイルドカードを使用してみました.iconsか?

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

また

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

編集: 金曜日にページがタイムアウトしたため、表示できませんでした。今日、次のエラーが表示されます (Safari 5.1.2/MAC):

  1. XMLHttpRequest はhttp://static.ak.fbcdn.net/rsrc.php/v2/yy/r/5SjacuFVbni.jsを読み込めません 。Origin http://www.facebook.comは Access-Control-Allow-Origin で許可されていません。oauth
  2. リソースの読み込みに失敗しました: サーバーは 407 のステータスで応答しました (プロキシ認証が必要です) //これはおそらく私の側にあります。

「接続」の下に 6 つのアイコンが表示されます。

エラー行 1 の URL を直接 (Safari または Chrome) 参照しても問題ありません。

于 2012-10-18T15:33:36.387 に答える
1

<span class="icon-facebook">1</span>生成されたコンテンツをサポートしていないブラウザのバックアップのようです。デフォルトで (CSS を使用して) バックアップを非表示にし、生成されたコンテンツをサポートしていないブラウザーの場合は JavaScript にバックアップ アイコンを表示させることをお勧めします。Modernizr の「生成されないコンテンツ」クラスを使用するか、IcoMoon が提供する IE7 JavaScript ファイルを使用します。

Modernizr の使用:

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

または、lte-ie7.jsIcoMoon が提供するファイル。この方法を使用すると、余分なマークアップを使用する必要がなくなります (<span class="icon-facebook-b">バックアップなしで使用するだけ<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]]);
        }
    }
};
于 2012-10-22T09:41:15.443 に答える
0

現在、Chrome はフッターのソーシャル アイコンを問題なく表示していますが、Safari 5.1.7 ではアイコンがまったく表示されません。

私が気付いたもう 1 つのことは、複数の CSS ファイルが 2 回適用されていることです (縮小されたファイルとプレーンなファイル)。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' />

Safari がこの特定の問題に熱中しているようです。

于 2012-10-23T15:49:50.000 に答える