Polymer core-icon 不在 Firefox 上显示，而是在 Chrome 上显示答案

【问题标题】：Polymer core-icon is not displaying on Firefox but on ChromePolymer core-icon 不在 Firefox 上显示，而是在 Chrome 上显示
【发布时间】：2015-04-22 06:19:03
【问题描述】：

我遇到了一个关于 Polymer core-icon 的奇怪问题。下面是我的sn-p：

...
...
<link rel="import" href="../bower_components/core-icons/iconsets/social-icons.html">
...
...
<post-card id="card-1">
  <div>Something in bold!</div>
  <h2>My first post-card element with core-icon</h2>
  <p>Core-icon is not rendering properly on Firefox...Please help!</p>
  <core-icon class="large-icon" icon="android"></core-icon>
</post-card>

我的明信片元素如下所示：

...
<div class="card-header" layout horizontal center>
  <content select="img"><img src="images/{{imgsrc}}" alt="" /></content>
  <content select="h2">{{heading}}</content>
</div>
<content select="p">{{para}}</content>
<content></content>
...

当我在 Chrome 中运行上述程序时，图标呈现正常，但在 Firefox 上，图标只闪烁一次然后消失！

插入点内的其余内容在两个浏览器上都可以正常渲染。

以下屏幕截图显示了我在不同浏览器上的内容：

为了创建明信片元素，我参考了以下链接： https://www.polymer-project.org/0.5/docs/start/tutorial/step-2.html

我最近开始使用 Polymer。期待高手的帮助。提前致谢

【问题讨论】：

标签： polymer web-component

【解决方案1】：

好的。我让它工作了！

这是在 Chrome 和 Firefox 中没有以类似方式工作的 CSS。我在 CSS 中为明信片元素设置了一个背景属性#ffffff，令人惊讶的是它与 Firefox 上的图标重叠！当我将 bacground 属性设置为“none”时，两个浏览器中的图标都很好！

:host {
  /*background: #ffffff;*/
  background: none;
  position: relative;
  padding: 0;
  font-size: 1.2rem;
  margin-bottom: 8px;
  box-shadow: 2px 2px 2px #888888;
  @include respond-to(handhelds) { width: 100%; clear:both; display:block !important; background:#ccff00;}
  @include respond-to(medium-screens) { width: 30%; float:left; background:#dddddd; }
  @include respond-to(wide-screens) { width:25%; float:left; }
  margin:5px;
}

注意：我也尝试了以下方法：

1. removed the line background: #ffffff;
2. background: transparent

但在我将其设置为

之前，上述方法均无效

background: none;

我完全搞砸了，不知道背景颜色会让生活变得悲惨！

【讨论】：