7

我无法弄清楚为什么 Safari/Mobile Safari 忽略了一行代码，它使用 Modernizr 的.generatedcontent规则来隐藏使用 icomoon 的图标。您可以在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。Access-Control-Allow-Origin 不允许来源 http://www.facebook.com 。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 中根本没有图标。

我注意到的另一件事是，几个 CSS 文件被应用了两次（缩小版和普通版）。见第 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 回答