用于Chrome的按钮的CSS，但不适用于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

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

Answer 2

添加此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;
}