Material 在 Safari 桌面和 phone 中呈现 Design lite 对话框

Question

我已经按照 getmdl.io 的示例实现了 dialog 组件。它在 Chrome、Firefox 和 Android Web 视图中运行良好；但在 Safari 中，它会呈现 dialog 元素，即使它们未被调用。我已将示例放在 body 元素的末尾，就在脚本元素之前。

如有任何想法，我们将不胜感激。

Answer 1

Material Design Lite 使用 dialog-Element, which is not supported by all browsers. (See Browser-Compatibility)

This is an experimental technology Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

要使其在其他浏览器中工作，您必须包含 dialog-polyfill。另请注意，<dialog>-元素应直接位于 <body>-标签之后，而不是在任何其他包装器内。

查看从 dialog-polyfill 复制的代码示例：

<head>
  <script src="dialog-polyfill.js"></script>
  <link rel="stylesheet" type="text/css" href="dialog-polyfill.css" />
</head>
<body>
  <dialog>
    I'm a dialog!
    <form method="dialog">
      <input type="submit" value="Close" />
    </form>
  </dialog>
  <script>
    var dialog = document.querySelector('dialog');
    dialogPolyfill.registerDialog(dialog);
    // Now dialog acts like a native <dialog>.
    dialog.showModal();
  </script>
</body>

Dialog-Element 也将从 HTML 5.1 中删除，因为 chrome 是唯一真正原生支持它的浏览器。参见 https://github.com/w3c/html/issues/427

Material 在 Safari 桌面和 phone 中呈现 Design lite 对话框

Material Design lite dialog render in Safari desktop and phone

html

javascript

safari

mobile-safari

material-design-lite