我正在使用Polymer建立网站。我目前在paper-ripple上遇到一些问题。现在，我遇到的问题是，即使单击h2或h3，即使删除<div class='description'> -tag及其关闭选项卡，波纹也不会出现。查看paper-ripple的大小，它涵盖了整个<div class='album-header'>，所以这不应该成为问题。
另外，在填充区域中的<div class='description'>下单击，也会引起波纹。
<div class="album-header" vertical layout on-tap="{{albumTapped}}">
<paper-ripple class="recenteringTouch" fit></paper-ripple>
<content select="img"></content>
<div class="description">
<content select="h2"></content>
<content select="h3"></content>
</div>
</div>
编辑:
我已经做了一些进一步的测试，并缩小了范围。看一看this示例。将样式应用于子元素不会带来任何问题，除非您还指定了不透明度。在链接中给出的示例中，绿色文本具有不透明性。单击此文本不会对我产生波纹(在Chrome 36中运行)。 (绿色的分配与它无关，只是为了更容易发现)。单击该
<h3>标记周围的任何位置都会使波动发生。 最佳答案
您只需要在外部容器上增加z-index，因此所有<content>都将位于其下方。例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<link rel='import' href='http://www.polymer-project.org/0.8/components/paper-ripple/paper-ripple.html'>
<script>console.clear()</script>
</head>
<body>
<style>
album-small {
width: 200px;
margin: 10px;
}
</style>
<div layout horizontal>
<album-small>
<h2>The Shatner</h2>
<h3>An interminable rambling spoken word piece.</h3>
</album-small>
<album-small>
<h2>What</h2>
<h3>What wat what wat what what wat</h3>
</album-small>
</div>
<polymer-element name='album-small' noscript>
<template>
<style>
.album-header {
/* Note: relative positioning seems necessary
for paper-ripple. */
position: relative;
padding: 10px;
height: 200px;
z-index: 100;
}
</style>
<div class="album-header" vertical layout>
<paper-ripple class='recenteringTouch' fit></paper-ripple>
<content select="img"></content>
<div class="description">
<content select="h2">hi</content>
<content select="h3">hi</content>
</div>
</div>
</template>
</polymer-element>
</body>
</html>
关于 polymer 波纹遍及所有 child ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24840780/