为什么笔记本电脑和手机上的按钮样式会发生变化

Question

我无法弄清楚为什么我的按钮样式会在运行safari的笔记本电脑上发生变化，相比之下，手机上运行的是iPhone。

HTML code：

<div id="img_container">
<img src="../assets/images/hotdrinks.png" style="hight:50%;">
<button class="button" onClick="parent.location='hotdrinks.html'"> Hot Drinks Menu </button> 
</div>

<div id="img_container">
<img src="../assets/images/craftbeer.png" style="hight:50%;">
<button class="button" > Craft Club </button>
</div>  

CSS代码：

#img_container {
position:relative;
display:inline-block;
text-align:center;
}

.button {
position:absolute;
bottom:10px;
right:10px;
width:200px;
height:50px;
font-family: test;  
color: #000000;
text-transform: uppercase;
font-size: 40px;
}

笔记本：

电话：

Answer 1

iphone和ipad上的Safari在按钮上应用了一些默认渲染。

试试，-webkit-appearance：none;

Similar Question

Answer 2

iPhone和iPad上的Safari应用其默认样式。 使用：

<button type="button">

然后添加其余部分。它应该完美无缺。