Polymer 核心图标未显示在 Firefox 上，而是显示在 Chrome 上

Question

我在使用 Polymer core-icon 时遇到了一个奇怪的问题。下面是我的代码片段:

...
...
<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。期待高手的帮助。提前致谢

Answer 1

好的。我让它工作了!

这是 CSS 在 Chrome 和 Firefox 中的工作方式不同。我在 CSS 中为明信片元素设置了一个背景属性#ffffff，这令人惊讶地与 Firefox 上的图标重叠!当我将 bacground 属性设置为“无”时，图标在两种浏览器中都显示正常!

: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;

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