css - iOS 上 chrome 上奇怪的按钮样式
问题描述
我正在开发的网站上有一堆卡片。它们显示从数据库中提取的一些内容,并在单击时链接到该特定卡片的更详细内容页面。在所有浏览器和屏幕上,一切都运行良好,除了卡片在 iOS 上变成了圆形,并且应用了渐变作为背景色。这些卡片的边框半径设置为 15 像素,但表现得好像边框半径为 50%。(网站上其他地方还有其他具有相同边框半径的元素,但它们不是按钮并且显示正常),
我看过其他帖子并了解这可能是 iOS 应用的默认样式的问题。我通过设置 -webkit-appearance: none; 尝试了他们的解决方案 在按钮上和全局上,但这并不能解决问题。我也尝试设置 -webkit-border-radius: 15px; 按钮本身,无济于事。
任何想法可能导致问题以及如何覆盖它?此外,有没有办法从 iOS 上的 chrome 内部访问 devtools 以查看发生了什么?
这是按钮的 css 样式(还有一些媒体查询会在给定的断点处更改宽度和高度,但我已省略)。
.toolcard {
-webkit-appearance: none;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 200px;
height: 200px;
margin: 0 20px 40px;
flex: none;
border-radius: 15px;
-webkit-border-radius: 15px;
background-color: white;
border: none;
outline: none;
cursor: pointer;
box-shadow: 0 1.4px 1.1px rgba(0, 0, 0, 0.034), 0 3.3px 2.6px rgba(0, 0, 0, 0.048), 0 6.2px 5px rgba(0, 0, 0, 0.06), 0 11.1px 8.9px rgba(0, 0, 0, 0.072), 0 20.9px 16.7px rgba(0, 0, 0, 0.086), 0 50px 40px rgba(0, 0, 0, 0.12);
}
编辑:演示链接已删除
为了说明,这里有两张显示差异的图像:
例如:正确的按钮样式。
例如:iOS 上的样子。
解决方案
Graeme 在对原始帖子的评论中回答,但将作为答案发布,以便其他人可以轻松看到:
Bootstrap 覆盖了 -webkit-appearance: none css。解决方案是使用
.someButtonClass {
-webkit-appearance: none !important;
}
推荐阅读
- python - 将超链接换行到列中的现有文本
- go - 程序失败:write tcp broken pipe 错误
- javascript - 如何禁用/隐藏和更改 CK 编辑器图像弹出窗口中的某些元素
- python - 如何覆盖继承层次结构中的函数?
- jquery - Jquery根据多个单选按钮组选择显示/隐藏div
- html - 如何在 div 的顶部和底部实现重复的 SVG?
- amazon-web-services - AWS DMS mysql 到 DDB 阵列
- python-3.x - 使用 io 在 python 中将字节传递给 ffmpeg
- php - 使用 POST PHP 方法传递值
- c# - 通过 AutoCAD 2021 实验室工作,不确定实验室 #5 要求我做什么