MDL 버튼이 Safari에 표시되지 않음

카드의 버튼을 사용하여 mdl을 사용하려고하는데 Chrome과 Safari에서 일관되게 작동하는 데 문제가 있습니다.MDL 버튼이 Safari에 표시되지 않음

서면으로

<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>

, 그것은 크롬에서 작동하지만 사파리에 표시되지 않습니다 다음은 HTML입니다. 버튼 스타일에서 '높이 : 100 %'를 제거하면 Safari에서 작동하지만 Chrome에서는 사라집니다. 어떤 도움이 많이 주시면 감사하겠습니다 https://jsfiddle.net/shooks/80q7g7tq/11/

여기에 도움이된다면 함께 연주하는 바이올린입니다. 나는 웹 개발에 익숙하지 않으므로, 쉬운 일이라면 사과드립니다.

출처

2017-01-30 shooks

MDL 버튼은 사파리에서 잘 작동합니다. 버튼을 엉망으로 만든 것이 바로 코드입니다.

버튼 html 안에 h1 태그를 사용했습니다.
버튼 요소 안에 추가 요소를 사용하지 마십시오.
mdl에서 제공하는대로 mdl 요소를 사용하십시오. 확실한 경우가 아니라면 새로운 것을 삽입하지 마십시오.
글꼴 크기를 늘리려면 버튼에 새 클래스를 추가하고 font-size을 적용하십시오. H1은 해결책이 아닙니다. H1은 페이지/기사 표제에 사용됩니다.
요소에 인라인 CSS를 사용하지 마십시오. 클래스와 ID를 사용하십시오.

확인하십시오.이 js fiddle을 확인하십시오. 추가 CPS를 사용하지 않고 MDL 단추 코드를 사용했습니다. 그것은 크롬과 사파리 모두에서 잘 작동합니다. 모범 사례에 대한

자료 :

출처

2017-02-21 09:54:21

MDL 버튼이 Safari에 표시되지 않음

답변

관련 문제