[英]MDL Button Not Showing in Safari
I'm trying to use mdl with a button inside a card and am having trouble getting it to work across Chrome and Safari consistently. 我正在尝试通过卡片内的按钮使用MDL,但无法使其始终在Chrome和Safari上正常运行。 Here's the html:
这是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>
As written, it works on Chrome but doesn't show on Safari. 按照书面规定,它可以在Chrome上运行,但不能在Safari上显示。 I can get it working on Safari by removing "height:100%" in the button style, but then it disappears on Chrome.
我可以通过删除按钮样式中的“高度:100%”来使其在Safari上正常工作,但随后它在Chrome上消失了。
Here's a fiddle to play with if it helps: https://jsfiddle.net/shooks/80q7g7tq/11/ 如果有帮助的话,这是一个小玩意儿: https : //jsfiddle.net/shooks/80q7g7tq/11/
Any help would be much appreciated. 任何帮助将非常感激。 I'm new to web development, so apologies if this is an easy one.
我是Web开发的新手,所以很抱歉,这很抱歉。
MDL button works fine in safari. MDL按钮在野生动物园中可以正常使用。 It is your code that messed up the button.
是您的代码弄乱了按钮。
font-size
to it. font-size
。 H1 is is not the solution. Check this js fiddle , I have used mdl button code, without using any extra css. 检查此js小提琴 ,我已经使用了mdl按钮代码,而没有使用任何额外的CSS。 It works fine in both chrome and safari.
在chrome和safari中都可以正常工作。
Resources for best practices: 最佳实践资源:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.