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.034),0 3.3px 2.6px rgba(0,0.048),0 6.2px 5px rgba(0,0.06),0 11.1px 8.9px rgba(0,0.072),0 20.9px 16.7px rgba(0,0.086),0 50px 40px rgba(0,0.12);
}

编辑：演示链接已删除

为了说明，这里有两张显示差异的图片：

例如：正确的按钮样式。

correct button styling

例如：iOS 上的样子。

what it looks like on iOS

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

border-radius ios ios styling