代码之家 › 专栏 › 技术社区 › miguelarcilla

聚合物-使内容显示在非Chrome浏览器中

polymer cross-browser browser google-chrome html

miguelarcilla · 技术社区 · 10 年前

我正在开发的一个网站中使用Polymer,在Google Chrome中开发时取得了一致的结果。然而,当我在其他浏览器(IE11、FireFox 32、Android上的Chrome)中测试内容时,我只看到一个空白屏幕,或者偶尔看到没有格式的普通内容。根据 Polymer's Browser Compatibility page ,我不希望这些功能在其他浏览器上正确呈现(除了Android上的Chrome)。然而,类似于 PolyMail 和 Kitteh Anonymous 在这些浏览器上正确渲染,尽管有轻微延迟。

是否有一个步骤让我无法在Chrome以外的浏览器(包括Chrome for Android)上看到正确生成的内容?

下面是我的页面的示例框架。我观察到有些使用模板和自定义元素,但我不确定需要做什么才能在Chrome for Desktop之外正常运行。

<!DOCTYPE html>
<html lang="en">
<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">

    <title>My Polymer Site</title>

    <!--Initialize Polymer-->
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
    <link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
</head>

<body unresolved fullbleed>
    <core-drawer-panel id="site-container-panel">
        <core-header-panel id="site-nav" drawer>
            <!-- drawer header panel content here -->
        </core-header-panel>
        <core-header-panel mode="waterfall-tall" main>
            <!-- main header panel content here -->
        </core-header-panel>
    </core-drawer-panel>
</body>
</html>