Question

我正在尝试将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上显示。我可以通过删除按钮样式中的“height：100％”来使其在Safari上运行，但随后它会在Chrome上消失。

如果它有帮助，可以使用这个小提琴：https://jsfiddle.net/shooks/80q7g7tq/11/

非常感谢任何帮助。我是网络开发的新手，如果这很容易就道歉。

Answer 1

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

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

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

最佳实践资源：

MDL按钮不在Safari中显示

1 个答案: