Question

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

任何想法都表示赞赏。

Answer 1

Material Design Lite使用dialog-Element，并非所有浏览器都支持。（见Browser-Compatibility）

这是一项实验技术，因为这项技术规范尚未稳定，请检查兼容性表用于各种浏览器。还要注意语法和行为实验技术可能会在未来的版本中发生变化浏览器随着规范的变化而变化。

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

请参阅从dialog-polyfill复制的codeample：

<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 Desktop精简版对话框在Safari桌面和手机中呈现

1 个答案: