Question

我已经构建了一个使用聚合物和一些自定义元素的页面。我很失望，它只能在Chrome中正常运行，这是一个很大的挫折。在Firefox和IE中，它只显示页面标题，其余为空白，但控制台中没有报告错误。我在网上搜索，但找不到可以解决问题的答案（或者我可能没有正确理解它。）。

今天我发现，当我导入webcomponents.js时：

<script src="/bower_components/webcomponentsjs/webcomponents.js"></script>

该页面在Firefox中显示与在Chrome中一样好。但是，它不再在Chrome中显示（空白页）。

在我看来，Chrome只接受这样的导入：

<link rel="import" href="/bower_components/webcomponentsjs/webcomponents.js">

有没有人知道这种浏览器精神分裂症的解决方案，即如何正确导入脚本，这样两个浏览器都会接受一个代码？

修改

老实说，我不能想到任何其他可能造成它的东西，但这一行，因为如果你改变它，你要么什么也不得，或者显示所有东西。

该页面挂起premierleaguebar.php5.cz，这是<plb-table>的代码，索引页面上的自定义元素：

<dom-module id="plb-table">
<template>
    <link href="/public/styles/main.css" rel="stylesheet" type="text/css"/>

    <style>
        table.data {
            border-collapse: collapse;
            border: 1px solid #41587c;
            text-align: center;
            width: 100%;
        }

        table.data td, table.data th {
            padding: 6px;
            border: 1px solid #41587c;
            text-align: center; 
        }

        table.data th {
            background-color: #41587c;
            color: #ff0;
            border: 2px solid #666;
        }

        table.data tr:hover {
            background-color: #edf1f6;    
        }
    </style>
    <link rel="import" href="/bower_components/paper-material/paper-material.html"/>
    <paper-material elevation="3">
        <div style="overflow-x:auto;">
        <table class="data">
            <thead>
                <tr>
                    <th colspan="3">HRÁČ</th>
                    <th colspan="4"><abbr title="Played">ZÁPASY</abbr></th>
                    <th colspan="4"><abbr title="Played">HRY</abbr></th>
                    <th colspan="3"><abbr title="Played">SKÓRE</abbr></th>
                    <th colspan="2"><abbr title="Played">PRŮMĚRY</abbr></th>
                </tr>
                <tr>
                    <th>#</th>
                    <th>JMÉNO</th>
                    <th><abbr title="Počet odehraných zápasů">G</abbr></th>
                    <th><abbr title="Výhry">W</abbr></th>
                    <th><abbr title="Remízy">D</abbr></th>
                    <th><abbr title="Prohry">L</abbr></th>
                    <th><abbr title="Body"><b>P</b></abbr></th>
                    <th><abbr title="Legs Won - vyhrané hry">LW</abbr></th>
                    <th><abbr title="Legs Lost - prohrané hry">LL</abbr></th>
                    <th><abbr title="Legs Difference - rozdíl LW - LL">LD</abbr></th>
                    <th><abbr title="Nezavřené hry">N</abbr></th>
                    <th><abbr title="Načtené body (pro soupeře)">P+</abbr></th>
                    <th><abbr title="Obdržené body (od soupeře)">P-</abbr></th>
                    <th><abbr title="Points Difference - rozdíl P+ - P-">PD</abbr></th>
                    <th><abbr title="Marks Per Round - počet zásahů na kolo podle automatu co má dycky pravdu; Průměr ze všech her">MPR</abbr></th>
                    <th><abbr title="Průměrné kolo zavření při výhře">R</abbr></th>
                </tr>
            </thead>
            <tbody>
            <template is="dom-repeat" items="{{table}}">
                <tr>
                    <td>{{poradi(index)}}</td>
                    <td>{{item.nick}}</td>
                    <td>{{item.matchesplayed}}</td>
                    <td>{{item.win}}</td>
                    <td>{{item.draw}}</td>
                    <td>{{item.loss}}</td>
                    <td><b>{{item.points}}</b></td>
                    <td>{{item.legsfor}}</td>
                    <td>{{item.legsagainst}}</td>
                    <td>{{item.legdiff}}</td>
                    <td>{{item.unconcealed}}</td>
                    <td>{{item.nactenebody}}</td>
                    <td>{{item.obdrzenebody}}</td>
                    <td>{{item.bodydiff}}</td>
                    <td>{{item.mpr}}</td>
                    <td>{{item.zavrird}}</td>
                </tr>
            </template>
            </tbody>
        </table>
        </div>
    </paper-material>
</template>
</dom-module>

<script>
Polymer({
    is: "plb-table",
    properties: {
        table: {type: Array}
    },
    poradi: function (ind){
        return ++ind;
    }
});
</script>

EDIT2

我仍然认为它是聚合物和/或浏览器支持问题。我通过检查浏览器类型（get_browser）并根据特定浏览器的喜欢导入webcomponents.js文件来绕过它。它绝对不是网站设计师的正确解决方案，只有我的工程师才能正常工作＆＃34;风格，但它做我想做的事。

无论如何，如果你们中的任何一位网页设计师都知道如何正确地解决它，我会非常乐意听到它。

如何正确导入webcomponents.js，所以我的聚合物页面适用于chrome和firefox？

0 个答案: