ラップトップとモバイルでボタンのスタイルが変わるのはなぜですか？

Question

ノートパソコンでSafariを実行しているときのボタンのスタイルが、この場合はiPhoneのSafariと比べてどうして変わるのか理解できません。

HTMLコード：

<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のSafariとipadは、ボタンのデフォルトのレンダリングを適用します。

Try、-webkit-appearance：none;

Similar Question

Answer 2

iPhoneやiPadのSafariはデフォルトのスタイルを適用します。 使用：

<button type="button"> 

次に残りを追加します。それは完璧に動作します。