我有一些简单的代码(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>
