Modernizr CSS规则被Safari忽略（Mobile Safari也是如此）
我无法弄清楚为什么Safari / Mobile Safari会忽略使用Modernizr的.generatedcontent规则来使用icomoon隐藏图标的一行代码。 您可以在http://importbible.com/查看实时网站，图标位于页面的页脚上。 浏览器在Chrome上完美呈现。 做了一些更多的测试，Safari 5.1.1在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; }
把它作为一个调试选项扔到那里，如果没有其他的话。 你有没有尝试过使用通配符.icons ？
[class*='icon-'] { display:none !important }
要么
[class^='icon-'] { display:none !important }
编辑：周五您的网页超时，所以我无法查看它。 今天我收到以下错误（Safari 5.1.2 / MAC）：
我在“连接”下看到6个图标。
我没有问题直接浏览到错误行＃1中的网址（Safari或Chrome）。
它看起来像<span class="icon-facebook">1</span>是您不支持生成内容的浏览器的备份。 我会建议默认隐藏备份（通过CSS），并让javascript显示不支持生成内容的浏览器的备份图标。 通过使用Modernizr的“no-generatedcontent”类，或者IcoMoon提供的IE7 javascript文件。
使用Modernizr：
.icon-facebook { display: none; }
.no-generatedcontent .icon-facebook {display: inline; }
或者lte-ie7.js提供的lte-ie7.js文件。 使用这种方法，您不必使用额外的标记（只需使用<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' : '!',
'icon-home-2' : '"',
'icon-newspaper' : '#',
'icon-pencil' : '$',
'icon-pencil-2' : '%'
},
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]]);
}
}
};
目前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&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在这个特定的问题上变得疯狂。
链接地址: http://www.djcxy.com/p/64701.html上一篇: Modernizr CSS rule ignored by Safari (Mobile Safari as well)