CSS for 按钮在 chrome 上工作，但在 safari 上不起作用

Question

我在按钮样式方面遇到了一些问题。CSS 在 chrome 上完美运行，但在 safari/safari 上不能完美运行：https://prnt.sc/ku3bhl，chrome：https://prnt.sc/ku3wjj/这是我正在使用的代码/我基本上覆盖了它从插件中获得的一些样式：

.popover-markup2215 button {
background: #fff !important;
border-radius: 0px !important;
border-color: #111 !important;
padding: 12px !important;
margin-bottom: -177px !important;
margin-left: 119px !important;
}

示例链接：https://graveren.mmcreaties.nl/product/iphone-7-telefoonhoesje-ontwerpen-zwart/

Answer 1

添加此 CSS。

您需要使用-webkit-appearance

.single_add_to_cart_button {
font-weight: 500 !important;
text-transform: lowercase;
border: 2px solid #796eff !important;
box-shadow: 7px 7px 0 rgba(79, 84, 124, 0.4) !important;
background: #796eff !important;
background-image: none !important;
width: 40%;
border-radius: 50px;
-webkit-appearance: none;
}

Answer 2

正如我从开发工具中看到的那样，类名是：.popover-markup2214而不是 2215，或者如果类正在动态更改，请尝试像这样.cart .trigger.btn