用于 chrome 但不适用于 safari 的按钮的 CSS

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;
}