iOS 上 chrome 上奇怪的按钮样式答案

【问题标题】：Strange button styling on chrome on iOSiOS 上 chrome 上奇怪的按钮样式
【发布时间】：2021-04-01 12:20:53
【问题描述】：

我正在开发的网站上有一堆卡片。它们显示从数据库中提取的一些内容，并在单击时链接到该特定卡片的更详细内容页面。在所有浏览器和屏幕上，一切都运行良好，除了卡片在 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 上的样子。

【问题讨论】：

嗨。你能努力并有一个可行的例子吗？删除 html 中的模板内容
可能是某些内容被覆盖，或者您需要应用额外的 css 规则。但是没有看到一个例子，我们都只是猜测。
所以看起来 reboot.scss （引导程序的一部分）正在覆盖你的外观 none。要对此进行测试，您可以尝试使用 -webkit-appearance: none !important;
感谢@GraemeNiedermayer，这肯定是完成了。将作为答案发布。
删除了带有现场演示链接的 cmets

标签： css ios styling border-radius

【解决方案1】：

Graeme 在 cmets 中对原始帖子进行了回答，但将作为答案发布，以便其他人可以轻松看到：

Bootstrap 覆盖了 -webkit-appearance: none css。解决方案是使用

.someButtonClass {
  -webkit-appearance: none !important;
}

【讨论】：