Le bouton MDL ne s'affiche pas dans Safari

Question

J'essaie d'utiliser mdl avec un bouton à l'intérieur d'une carte et je n'arrive pas à le faire fonctionner correctement sur Chrome et Safari. Voici le 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> 

Comme écrit, cela fonctionne sur Chrome, mais ne s'affiche pas sur Safari. Je peux le faire fonctionner sur Safari en supprimant "height: 100%" dans le style de bouton, mais il disparaît ensuite sur Chrome.

est ici un violon à jouer avec si elle aide: https://jsfiddle.net/shooks/80q7g7tq/11/

Toute aide serait grandement appréciée. Je suis nouveau au développement de Web, ainsi des excuses si ceci est facile.

Answer 1

Le bouton MDL fonctionne très bien en safari. C'est votre code qui a foiré le bouton.

1. Vous avez utilisé la balise h1 à l'intérieur du bouton html. Ne pas utiliser d'élément supplémentaire à l'intérieur de l'élément bouton.
3. Utilisez les éléments mdl fournis par mdl. N'insérez rien de nouveau entre les deux, sauf si vous êtes sûr.
4. Si vous souhaitez augmenter la taille de la police, ajoutez une nouvelle classe au bouton et appliquez-lui font-size. H1 n'est pas la solution. H1 utilisé pour l'en-tête de page/article.
5. N'utilisez pas l'élément css en ligne. Utilisez des classes et des ID.

Cochez cette case js fiddle, j'ai utilisé le code du bouton mdl, sans utiliser de css supplémentaire. Cela fonctionne très bien en chrome et en safari.

Ressources pour les meilleures pratiques:

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