在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按鈕

回答

相關問題