Polymer core-icon不会在Firefox上显示，也不会在Chrome上显示

Question

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

插入点内的其他内容在两个浏览器上呈现正常。

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

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

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

Answer 1

确定。我得到了它的工作！

这是在Chrome和Firefox中使用类似方式的CSS。我在CSS中设置了背景属性#ffffff for post-card element，令人惊讶地重叠了Firefox上的图标！当我将bacground属性设置为＆＃34; none＆＃34;两个浏览器中的图标都显示正常！

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

注意：我也尝试了以下内容：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但在我将其设置为

之前，上述方法都没有奏效

＆＃13;

＆＃13;

background: none;

＆＃13;

＆＃13;

＆＃13;

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