反應按鈕在 Safari iOS / CSS / Z4C4AD5FCA2E7A3F74Z44DBB1CED003811 上不可見

Question

我做了一個小漢堡按鈕。 此按鈕未顯示在 Safari iOS 上。 在 Windows Chrome 和 Firefox 上顯示，也在我的 Android 設備上顯示。 我是 web 開發的初學者，已經嘗試過但找不到任何解決方案。 也許你知道問題是什么。

反應組件：

import React from "react";
import "./DrawerButton.css";

const drawerButton = (props: Props) => (
  <button onClick={props.onClick} className="drawer_button">
    <div className="drawer_button_line" />
    <div className="drawer_button_line" />
    <div className="drawer_button_line" />
  </button>
);

interface Props {
  onClick: () => void;
}

export default drawerButton;

CSS：

.drawer_button {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 24px;
    width: 23px;
    background: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    box-sizing: border-box;
}

.drawer_button_line {
    width: 100%;
    height: 2px;
    background: white;
    border-radius: 3px;
}

Answer 1

嘗試將-webkit-appearance: none添加到您的按鈕 CSS。 如果不添加此屬性，safari 將顯示自己的默認樣式按鈕（非常丑陋）

https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

Answer 2

嘗試添加內聯 styles，如果某些特定的 css 未實現，因為 safari 在緩存中存儲了一些默認的 ZBC4150D023D32531236DB66。