Dart Polymer：使用 CoreAnimatedPages 创建 PaperDialog 在 Firefox 中显示不正确

Question

我使用包含 CoreAnimatedPages 的 Dart Polymer PaperDialogs。这个想法是有弹出窗口，您可以在其中单击多个选项视图。

示例存储库位于：https://bitbucket.org/neogucky/polymer-dialog-problem/

对话框视图：view.html

<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/paper_elements/paper_button.html">
<link rel="import" href="packages/paper_elements/paper_dialog.html">
<link rel="import" href="packages/paper_elements/paper_dialog_transition.html">
<link rel="import" href="packages/core_elements/core_animated_pages.html">

<polymer-element name="test-view">
  <template>
    <paper-dialog id="extendedNode" vertical autoCloseDisabled=true transition="paper-transition-center" opened=true class="noTitle">
      <content> 
      <core-animated-pages selected="{{page}}" valueattr="id" transitions="hero-transition cross-fade">
            <section id="0">
                <br><br>
                <p cross-fade>Click next to see the secret text.</p>
            </section>
            <section id="1">
                <br><br>
                <p cross-fade >This text is a secret, so don't tell Firefox users!</p>
          </section>
        </core-animated-pages>
    </content>
    </paper-dialog>
  </template>

<script type="application/dart" src="view.dart"></script>
</polymer-element>

CSS-文件:

html /deep/ paper-dialog {
  margin-top: -150px;
  margin-left: -300px;
}

html /deep/ paper-dialog /deep/ core-animated-pages{
  height: 300px;
  width: 600px;
}

预期行为：页面加载后，应弹出一个 300px x 600px 的对话框，左下方有一个按钮。

Firefox 中的行为： 当 css 文件中未设置大小时，会显示一个小对话框，类似于 chrome 中的对话框。

我想确认这是我使用不正确的 CSS 挂钩的错，还是这似乎是 Firefox 的聚合物问题。

Answer 1

如果您 CSS 不在 Polymer 元素内，您需要添加选择器的 polyfill 版本以使其在没有本机阴影的浏览器上工作-DOM 支持

html paper-dialog,
html /deep/ paper-dialog {
  margin-top: -150px;
  margin-left: -300px;
}

html paper-dialog core-animated-pages,
html /deep/ paper-dialog /deep/ core-animated-pages{
  height: 300px;
  width: 600px;
}

有关详细信息，请参阅 https://www.polymer-project.org/0.5/docs/polymer/styling.html and https://www.polymer-project.org/0.5/articles/styling-elements.html

Dart Polymer：使用 CoreAnimatedPages 创建 PaperDialog 在 Firefox 中显示不正确

Dart Polymer: Creating PaperDialog with CoreAnimatedPages displayed incorrectly in Firefox

firefox

dart

polymer