javascript – 为什么我的聚合物铁图标出现在导航的纸张输入下面？

我有一些简单的代码(Angular2 polymer),它创建一个带有铁图标作为后缀图标的纸张输入：

<paper-input type="text" [control]="email" label="Email">
       <iron-icon suffix icon="mail"></iron-icon>
 </paper-input>

这是完整页面,请注意,实体化网格和行类是我带入项目的唯一实现类：

<div class="section">
    <h1 class="paper-font-headline">Admin Registration</h1>

    <div class="row">
        <div class="col s12 m6 6">
            <p class="paper-font-body2">some stuff here</p>
        </div>

        <div class="col s12 m6 6">
            <paper-card class="stretch">
                <div class="sub-section">
                    <form>
                        <paper-input type="text"
                                     [control]="email"
                                     label="Email">
                            <iron-icon suffix icon="mail"></iron-icon>
                        </paper-input>
                    </form>
                </div>
            </paper-card>
        </div>
    </div>
</div>

这在页面加载上看起来很不错：

但是,当我离开页面并返回时,图标会低于输入：

在html中,您可以清楚地看到图标位于导航上的纸张输入容器之外.

谁看过这个吗？我很茫然.需要注意的一点是,只有在我的index.html文件中使用webcomponents-lite.js时才会发生这种情况. webcomponents.js在使用时有其他问题(不应该使用),但这不是其中之一.这是polymer 1.0.谢谢！

编辑：

这不是Chrome中的问题,而是在其他主流浏览器中.

以下是我的进口,以防相关：

<!-- 1. Load libraries -->
    <!-- IE required polyfills,in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <script>
        window.polymer = window.polymer || {};
        window.polymer.dom = 'shadow';
    </script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.dev.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>

    <link rel="import" href="bower_components/paper-styles/classes/global.html">
    <link rel="import" href="bower_components/paper-styles/classes/shadow.html">
    <link rel="import" href="bower_components/paper-styles/classes/shadow-layout.html">
    <link rel="import" href="bower_components/paper-styles/classes/typography.html">

    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
    <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
    <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
    <link rel="import" href="bower_components/paper-menu/paper-menu.html">
    <link rel="import" href="bower_components/paper-item/paper-item.html">
    <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
    <link rel="import" href="bower_components/iron-icon/iron-icon.html">
    <link rel="import" href="bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="bower_components/paper-ripple/paper-ripple.html">
    <link rel="import" href="bower_components/paper-card/paper-card.html">
    <link rel="import" href="bower_components/paper-input/paper-input.html">

这是我的bower.json依赖项：

"dependencies": {
    "webcomponentsjs": "~0.7.21","polymer": "polymer/polymer#~1.3.0","paper-elements": "polymerElements/paper-elements#~1.0.7"
  }

解决方法

<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../core-icon/core-icon.html">

<polymer-element name="my-element">

  <template>
    <style>    
      #paper_input {
        left: 380px;
        top: 380px;
        position: absolute;
      }
      #core_icon {
        left: 530px;
        top: 390px;
        position: absolute;
      }
    </style>
    <paper-input label="Type something..." id="paper_input"></paper-input>
    <core-icon icon="mail" id="core_icon"></core-icon>
  </template>

  <script>

    polymer({

    });

  </script>

</polymer-element>

原文地址：https://www.jb51.cc/js/157388.html