Polymer.js 浏览器兼容性 - 在 Firefox 和 Safari 中看不到 CSS答案

【问题标题】：Polymer.js browser compatibility - Can't see CSS in Firefox and SafariPolymer.js 浏览器兼容性 - 在 Firefox 和 Safari 中看不到 CSS
【发布时间】：2016-05-06 07:35:18
【问题描述】：

您好，我是使用 Polymer.js 的新手，我正在构建我的 HTML 自定义标签，以便在我的前端工作中重用它们。问题是当我尝试在 Safari 和 Firefox 中打开我的 index.html 时，我看到了唯一没有所有 CSS 的 HTML。在 Chrome 中，一切正常。我不明白为什么会这样。我使用 Polymer 1.0.0，而 Firefox 和 Safari 都是最新版本。有什么建议？谢谢大家。

这里是代码（你注意到我已经包含了 webcomponents-lite.min.js）：

index.html

 <!DOCTYPE html>
    <html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <title>Polymer Project</title>
    <script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="app/components/pd-dashboard/dashboard-articles.html" />

<div class="row">

    <dashboard-articles> </dashboard-articles>

        </div>
     <div class="col-sm-2"></div>
</div>

</html>

dashboard-articles.html：

<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="import" href="../../components/articles/article-2col/article-2col.html">
<link rel="import" href="../../components/articles/article-1col/article-1col.html">
<link rel="stylesheet" type="css/text" href="../../components/pd-dashboard/dashboard-articles.css" />
<!-- Fonts --> 
<link href='https://fonts.googleapis.com/css?family=Dosis:800,600,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Nunito:400,700' rel='stylesheet' type='text/css'>
<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>


<dom-module id="dashboard-articles">
<template>
<div class="container-fluid">
    <div class="row" style="margin: 5px">    

</div>

  <div class="row"> 
      <hr>         
    <div class="row">
          <div class="col-sm-5">
              <article-1col></article-1col>
              </div>
           <div class="col-sm-7">


           </div>   

       </div> 

   </div>    


</template>
 </dom-module>


     <script>
            Polymer({
                is: "dashboard-articles"
            });

        </script>

【问题讨论】：

标签： html css cross-browser compatibility polymer-1.0

【解决方案1】：

问题解决了！ .css 文件的<link> 必须在您创建的每个组件的标签<template> 内！

【讨论】：