文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在Firefox或Safari中未呈现的元素中的聚合物图标(Rails应用程序与Emcee )

问在Firefox或Safari中未呈现的元素中的聚合物图标(Rails应用程序与Emcee )
EN

Stack Overflow用户
提问于 2014-11-21 16:53:26
回答 2查看 1.5K关注 0票数 1

我正试图通过艾美宝石将聚合物集成到Rails 4应用程序中。我不能让网页组件中的图标(例如，图标-“搜索”中的纸图标-按钮)呈现在火狐。不过，图标本身就能发挥作用。而且，这个问题在Chrome中不会出现。我怀疑是管道问题。如有必要，可进行清洁处理。

application.html (聚合物组件清单文件夹/文件)

代码语言：javascript
复制
 *= require polymer/polymer
 *= require core-header-panel/core-header-panel
 *= require core-toolbar/core-toolbar
 *= require paper-button/paper-button
 *= require paper-icon-button/paper-icon-button
 *= require core-icon/core-icon
 *= require core-icons/core-icons
 *= require font-roboto/roboto
 *= require paper-shadow/paper-shadow

application.js ( js文件夹/文件的清单；列表中的第一条仅与聚合物相关)

代码语言：javascript
复制
//= require webcomponentsjs/webcomponents
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require_tree .

application.html.erb (html布局，链接到上面所示的拉入应用程序清单)

代码语言：javascript
复制
<!DOCTYPE html>
<html>
  <head>
    <title><%= yield(:title) %> | RailsWithPolymerTest </title>
    <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
    <%= html_import_tag "application", "data-turbolinks-track" => true %>
    <%= csrf_meta_tags %>
    <%= render 'layouts/shim' %>
  </head>
  <body class="<%= controller.controller_name %>">
    <%= render 'layouts/header' %>
    <div class="container">
      <%= render 'shared/flash_alert' %>
    <%= yield %>
    <%= debug(params) if Rails.env.development? %>
    <%= render 'layouts/footer' %>
    </div>
  </body>
</html>

--除非我在清单()中缺少一些依赖项，否则必须的文件被提供给浏览器。

​

代码语言：javascript
复制
<link rel="stylesheet" media="all" href="/assets/morris.css?body=1" data-turbolinks-track="true">
<link rel="stylesheet" media="all" href="/assets/choices.css?body=1" data-turbolinks-track="true">
<link rel="stylesheet" media="all" href="/assets/custom.css?body=1" data-turbolinks-track="true">
<link rel="stylesheet" media="all" href="/assets/question_formats.css?body=1" data-turbolinks-track="true">
<link rel="stylesheet" media="all" href="/assets/question_sets.css?body=1" data-turbolinks-track="true">
<link rel="stylesheet" media="all" href="/assets/questions.css?body=1" data-turbolinks-track="true">
<link rel="stylesheet" media="all" href="/assets/respondents.css?body=1" data-turbolinks-track="true">
<link rel="stylesheet" media="all" href="/assets/responses.css?body=1" data-turbolinks-track="true">
<link rel="stylesheet" media="all" href="/assets/sessions.css?body=1" data-turbolinks-track="true">
<link rel="stylesheet" media="all" href="/assets/static_pages.css?body=1" data-turbolinks-track="true">
<link rel="stylesheet" media="all" href="/assets/users.css?body=1" data-turbolinks-track="true">
<link rel="stylesheet" media="all" href="/assets/application.css?body=1" data-turbolinks-track="true">
<script src="/assets/webcomponentsjs/webcomponents.min.js?body=1" data-turbolinks-track="true">
<script src="/assets/jquery.js?body=1" data-turbolinks-track="true">
<script src="/assets/jquery.turbolinks.js?body=1" data-turbolinks-track="true">
<script src="/assets/jquery_ujs.js?body=1" data-turbolinks-track="true">
<script src="/assets/turbolinks.js?body=1" data-turbolinks-track="true">
<script src="/assets/raphael.js?body=1" data-turbolinks-track="true">
<script src="/assets/morris.min.js?body=1" data-turbolinks-track="true">
<script src="/assets/chart_refresh.js?body=1" data-turbolinks-track="true">
<script src="/assets/nav.js?body=1" data-turbolinks-track="true">
<script src="/assets/questions.js?body=1" data-turbolinks-track="true">
<script src="/assets/application.js?body=1" data-turbolinks-track="true">
<link rel="import" href="/assets/polymer/layout.html?body=1" data-turbolinks-track="true">
<style shim-shadowdom-css="">
<link rel="import" href="/assets/polymer/polymer.html?body=1" data-turbolinks-track="true">
<link rel="import" href="/assets/core-header-panel/core-header-panel.html?body=1" data-turbolinks-track="true">
<link rel="import" href="/assets/core-toolbar/core-toolbar.html?body=1" data-turbolinks-track="true">
<link rel="import" href="/assets/paper-ripple/paper-ripple.html?body=1" data-turbolinks-track="true">
<link rel="import" href="/assets/paper-shadow/paper-shadow.html?body=1" data-turbolinks-track="true">
<style>
<link rel="import" href="/assets/core-focusable/core-focusable.html?body=1" data-turbolinks-track="true">
<link rel="import" href="/assets/paper-button/paper-button-base.html?body=1" data-turbolinks-track="true">
<link rel="import" href="/assets/paper-button/paper-button.html?body=1" data-turbolinks-track="true">
<link rel="import" href="/assets/core-meta/core-meta.html?body=1" data-turbolinks-track="true">
<link rel="import" href="/assets/core-iconset/core-iconset.html?body=1" data-turbolinks-track="true">
<link rel="import" href="/assets/core-icon/core-icon.html?body=1" data-turbolinks-track="true">
<style>
<link rel="import" href="/assets/core-iconset-svg/core-iconset-svg.html?body=1" data-turbolinks-track="true">
<link rel="import" href="/assets/core-icons/core-icons.html?body=1" data-turbolinks-track="true">
<link rel="import" href="/assets/paper-icon-button/paper-icon-button.html?body=1" data-turbolinks-track="true">
<link rel="import" href="/assets/font-roboto/roboto.html?body=1" data-turbolinks-track="true">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
<link rel="import" href="/assets/application.html?body=1" data-turbolinks-track="true">

但核心图标(以下所有内容；从纸图标按钮中摘录)在浏览器控制台中是灰色的：。

代码语言：javascript
复制
<core-icon id="icon" icon="{{icon}}" src="{{src}}" relative="" aria-label="menu" role="img">
<svg viewBox="0 0 24 24" style="pointer-events: none; display: block;" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" fit="">
<g>
<path d="M3 18h18v-2h-18v2zm0-5h18v-2h-18v2zm0-7v2h18v-2h-18z">
</g>
</svg>
</core-icon>
web-component
ruby-on-rails
firefox
svg
polymer
EN

回答 2

Stack Overflow用户

发布于 2014-11-24 15:49:23

我遇到了这个确切的问题，并通过添加以下全局样式来修正它：

代码语言：javascript
复制
core-icon-button {
  -moz-user-select: none;
  border-radius: 2px;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  font-size: 1rem;
  margin: 2px;
  padding: 7px;
  vertical-align: middle;
}
html core-icon {
  background-repeat: no-repeat;
  display: inline-block;
  fill: currentcolor;
  height: 24px;
  position: relative;
  vertical-align: middle;
  width: 24px;
}

在添加了这些之后，这些图标在Firefox和Safari中对我都运行得很好。

票数 4
EN

Stack Overflow用户

发布于 2014-11-21 21:07:48

如果它在chrome上工作，而在Firefox上不工作，它看起来可能是一个不兼容的问题。

您可能想看看聚合物“浏览器兼容性”图表。同时，为了以防万一，你可以看到火狐的最新版本。

另外，你使用的是什么版本的聚合物？它们刚刚从0.4.0版本转到0.5.x版，您可能需要研究一下。版本0.4.0可能没有与Firefox兼容所需的多填充。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/27066400

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档