firefox - Dart polymer : Creating PaperDialog with CoreAnimatedPages displayed incorrectly in Firefox

Question

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

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

对话 View :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;
}

预期行为:页面加载后，应弹出一个 300 像素 x 600 像素的对话框，并在左下角弹出一个按钮。

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

我想确认这是否是我使用不正确的 CSS 钩子(Hook)的错，或者这似乎是 Firefox 的 polymer 问题。

Answer 1

如果 CSS 不在 Polymer 元素内，则需要添加选择器的 polyfill 版本，以使其在没有原生 shadow-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和 https://www.polymer-project.org/0.5/articles/styling-elements.html更多细节