サファリにMDLボタンが表示されない

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では表示されません。ボタンスタイルで「高さ：100％」を取り除いてSafariで作業することはできますが、Chromeでは消えます。すべてのヘルプははるかに高く評価されるだろうhttps://jsfiddle.net/shooks/80q7g7tq/11/

：

は、ここでそれは場合に役立ちますと遊ぶフィドルです。私はWeb開発の初心者ですので、これが簡単なのであれば謝ります。

Answer 1

MDLボタンはサファリでうまく動作します。ボタンを台無しにしたのはあなたのコードです。

1. ボタンhtmlの内側にh1タグを使用しました。
2. ボタン要素内に余分な要素を使用しないでください。
3. mdlが提供するmdl要素を使用します。あなたが間違っていない限り、間に新しいものを挿入しないでください。
4. フォントサイズを大きくしたい場合は、ボタンに新しいクラスを追加し、font-sizeを適用してください。 H1は解決策ではありません。ページ/記事見出しに使用されるH1。
5. 要素にインラインCSSを使用しないでください。クラスとIDを使用します。

これをチェックしてくださいjs fiddle、私は余分なCSSを使用せずにmdlボタンコードを使用しました。クロームとサファリの両方でうまく動作します。ベストプラクティスのための

資源：

• Writing your best code
• Frontend Guidelines
• Google HTML/CSS Style Guide