在Safari中未显示MDL按钮

我试图将mdl与卡内的按钮一起使用，并且无法一致地在Chrome和Safari中使用它。这里的html：在Safari中未显示MDL按钮

<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上。我可以通过删除按钮样式中的“height：100％”来获得它在Safari上的工作，但随后它会在Chrome上消失。

下面是与它是否有助于发挥小提琴：https://jsfiddle.net/shooks/80q7g7tq/11/

任何帮助将非常感激。我是网络开发新手，很抱歉，如果这很简单。

来源

2017-01-30 shooks

MDL按钮在safari中正常工作。这是你的代码搞砸了按钮。

您在按钮html中使用了h1标签。
不要在按钮元素中使用额外的元素。
使用mdl提供的mdl元素。除非你确定，否则不要在中间插入任何新东西。
如果你想增加字体大小，然后添加新的类到按钮，并应用font-size它。 H1是不是解决方案。 H1用于页面/文章标题。
请勿在元素上使用内联CSS。使用类和ID。

检查这个js fiddle，我已经使用了mdl按钮代码，没有使用任何额外的CSS。它在铬合金和safari中都能正常工作。

最佳实践

资源：

来源

2017-02-21 09:54:21

在Safari中未显示MDL按钮

回答

相关问题