CSS-手机上的按钮与检查元素移动视图上的按钮看起来有所不同
克里斯·约翰逊
我在带有以下CSS的网页上有一个按钮。当我在移动视图中使用开发人员工具查看网页时，它看起来像这样：
但是，当我在手机上查看网站上的按钮时，它看起来像这样。为什么会有奇怪的颜色渐变，为什么它看起来不像开发人员工具那样？
<input class="moreResultsButton" type="button" value="More Results">
.moreResultsButton {
width: 90% !important;
max-width: 90% !important;
margin-bottom: 17.944px !important;
margin-left: 5% !important;
margin-right: 5% !important;
margin-top: 0px !important;
border-radius: 22.82px !important;
background: #f3f3f3 !important;
}
乔汉纳
尝试使用 -webkit-appearance:none
根据操作系统的主题，外观CSS属性用于使用平台原生样式显示元素。
-webkit-appearance属性是此属性的非标准版本，由基于WebKit的浏览器（例如Safari）和基于Blink的浏览器（例如Chrome，Opera）用于实现同一目的。请注意，出于兼容性原因，Firefox和Edge也支持-webkit-appearance。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
HTML Css按钮在Firefox中看起来有所不同
- 2
CSS覆盖和屏幕混合模式在手机和笔记本电脑上看起来有所不同
- 3
fancybox的关闭按钮在某些手机上看起来有所不同
- 4
为什么我的CSS与您的CSS看起来有所不同？
- 5
CSS-动态添加图像时，图像看起来有所不同
- 6
相同的CSS和HTML代码，但在2页上看起来有所不同
- 7
Android：屏幕布局在相同型号的2部手机上看起来有所不同
- 8
Android：屏幕布局在相同型号的2部手机上看起来有所不同
- 9
HTML视频在不同的计算机上看起来有所不同
- 10
Android按钮样式在不同的设备（AOSP和Samsung Galaxy）上看起来有所不同
- 11
自定义NavigationBar按钮在iOS 7中看起来有所不同
- 12
如何调整 CSS 使关闭按钮看起来正确？
- 13
Android：画布和视图的颜色看起来有所不同
- 14
为什么Windows DPI缩放使屏幕元素看起来有所不同？
- 15
使用脚本创建的元素看起来有所不同
- 16
Android ActionBar导航选项卡在手机和平板电脑上看起来有所不同
- 17
Android ActionBar导航选项卡在手机和平板电脑上看起来有所不同
- 18
CSS3过渡在移动设备上的行为有所不同
- 19
部署在Heroku上的React Rails项目与本地主机上看起来有所不同
- 20
Chrome通过jQuery预先添加元素的CSS时会有所不同
- 21
Chrome通过jQuery预先添加元素的CSS时会有所不同
- 22
iOS使用复选框的切换按钮在不同的浏览器中看起来有所不同
- 23
Safari的CSS色彩渲染有所不同
- 24
自适应网站在移动浏览器中看起来有所不同
- 25
为什么我的React Web App在某些移动设备上看起来有所不同？
- 26
Imageview在不同的大小和密度下看起来有所不同
- 27
JButton字体在不同的PC上看起来有所不同
- 28
CSS：两个相同的元素在2个不同的网站上的显示方式有所不同
- 29
Android：AlertDialog在片段上看起来有所不同
我来说两句