Why is my button style changing when on laptop and mobile [duplicate]

你离开我真会死。 提交于 2020-12-13 04:22:10

问题


I cant figure out why my button style would change when its on a laptop running safari compared to a phone in this case an iPhone running safari.

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

#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;
}

Laptop:

Phone:


回答1:


Safari on the iphone and ipad applies some default rendering on buttons.

Try, -webkit-appearance: none;

Similar Question




回答2:


Safari on iPhone and iPad applies its default styling. Use:

<button type="button">

and then add the rest. It shall work perfectly.



来源:https://stackoverflow.com/questions/45349237/why-is-my-button-style-changing-when-on-laptop-and-mobile

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!