本文介绍了为什么我的按钮样式在笔记本电脑和移动设备上会发生变化的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我不明白为什么我的按钮样式在运行 safari 的笔记本电脑上与在手机上运行 safari 的 iPhone 相比会发生变化.

HTML 代码:

<img src="../assets/images/hotdrinks.png" style="hight:50%;"><button class="button" onClick="parent.location='hotdrinks.html'">热饮菜单 </button>

<div id="img_container"><img src="../assets/images/craftbeer.png" style="hight:50%;"><button class="button" >工艺俱乐部 </button>

CSS 代码:

#img_container {位置:相对;显示:内联块;文字对齐:居中;}.按钮 {位置:绝对;底部:10px;右:10px;宽度:200px;高度:50px;字体系列:测试;颜色:#000000;文本转换:大写;字体大小:40px;}

笔记本电脑:

电话:

解决方案

iPhone 和 iPad 上的 Safari 在按钮上应用了一些默认呈现.

试试,-webkit-appearance: none;

类似问题

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:

解决方案

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

Try, -webkit-appearance: none;

Similar Question

这篇关于为什么我的按钮样式在笔记本电脑和移动设备上会发生变化的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-29 16:58