Javascript Safari中未显示MDL按钮

我正在尝试使用带有卡内按钮的mdl，但很难让它在Chrome和Safari上保持一致。以下是html：

<div class="mdl-card mdl-shadow--8dp" style="width:690px; margin:auto; padding:0px" id="myCard">
  <button class="mdl-button mdl-js-button mdl-js-ripple-effect" style="height:100%; padding: 20px 0px 20px 0px;" align="center" id=myButton>
    <h1 id="myText" style="font-size:160px; font-weight:300;" align="center">Button</h1>
  </button>
</div> 

按钮

如前所述，它可以在Chrome上运行，但不能在Safari上显示。我可以通过删除按钮样式中的“高度：100%”使它在Safari上工作，但随后它在Chrome上消失

这里有一把小提琴，如果有用的话：

---

任何帮助都将不胜感激。我是网络开发新手，如果这是一个简单的问题，我深表歉意。

MDL按钮在safari中运行良好。是你的代码弄乱了按钮

您已经在按钮html中使用了h1标记

不要在按钮元素内使用额外的元素

使用mdl提供的mdl元素。除非您确定，否则不要在中间插入任何新内容

如果要增加字体大小，请向按钮添加新类，并对其应用

font-size

。H1不是解决方案。H1用于页面/文章标题

不要在元素上使用内联css。使用类和ID

检查这个，我使用了mdl按钮代码，没有使用任何额外的css。它在chrome和safari中都能正常工作

最佳做法资源：