Safari瀏覽器中的網站出現了異常的陰影現象

Question

<p>我建了一個網站，但在Safari瀏覽器上的菜單表現得很奇怪。請查看下面的視頻，我在視頻中展示了問題。只有在Safari瀏覽器中出現問題，其他瀏覽器都正常。</p> <p>可以在此處查看Safari中的問題影片 https://vimeo.com/757367403</p> <p>這是我的CSS，有人知道一些技巧來解決這個問題嗎？</p>

@import url('https://fonts.googleapis.com/css?family=Lato:400,700');

.elementor-nav-menu {
    對齊項目：居中；
}

.elementor-nav-menu * {
    字體系列：“Lato”，無襯線！重要；
    
}

html[lang="kl-kl"] .elementor-nav-menu > li:nth-child(4) a {
    字體大小：16px！重要；
    內邊距：15px 0px！重要；
}

.elementor-nav-menu > li:第一個孩子 {
    背景顏色：#00aeef；
    變焦：0.85；
}

.elementor-nav-menu > li:第n個孩子(2n) {
    背景顏色：#ef6500！重要；
    寬度：170px！重要；
    高度：170px！重要；
    縮放：0.9！重要；
}

.elementor-nav-menu >李阿{
    彈性成長：0！重要；
}

.elementor-nav-menu > li:第n個孩子(7n) {
    背景顏色：#e8b736！重要；
    變焦：0.85；
}
.elementor-nav-menu > li:第n個孩子(3) {
    背景顏色：#e8b736！重要；
    寬度：220px；
    高度：220px；
    填充：0 10px！重要；
}

.elementor-nav-menu > li:第n個孩子(4n) {
    背景顏色：#66cc9a！重要；
    變焦：0.85；
}
html[lang="kl-kl"] .elementor-nav-menu > li:第n個孩子(4n) {
    背景顏色：#66cc9a！重要；
    縮放：1.05！重要；
    填充：0 0px！重要；

    
}

.elementor-nav-menu > li:第n個孩子(4) {
        保證金：0 自動；
}

.elementor-nav-menu > li:第n個孩子(5n){
    背景顏色：#00aeef；
    變焦：1.1；
}

.elementor-nav-menu > li:第n個孩子(6) {
    寬度：180px！重要；
    高度：180px！重要；
}
.elementor-nav-menu > li:nth-child(5) {
    寬度：170px！重要；
    高度：170px！重要；
}

.elementor-nav-menu >李{
        -moz-邊框半徑：70px；
   -webkit邊框半徑：70px；
    邊界半徑：50%；
        背景大小：封面；
        背景重複：無；
      寬度：139px；
        高度：139px；
        文字對齊：居中；
        邊距：0 10px！重要；
    
      顯示：柔性； /* 或內聯柔性 */
    對齊項目：居中；
    調整內容：居中；
    
      過濾器： drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.75));
}

.elementor-nav-menu >李阿{
    顏色：#fff！重要；
    字體大小：18px！重要；
    自動換行：換行！重要；
    斷字：斷字！重要；
    空白：正常！重要；
    行高：26px；
    文字對齊：居中；
}
.elementor-nav-menu >李一：懸停{
    行高：30px；
}

.elementor-nav-menu li a .sub-arrow {
    顯示：無；
}

.elementor-nav-menu > .子選單:第n個子選單(3) {
    背景顏色：紅色；
}

.elementor-nav-menu--dropdown li a {
    調整內容：居中；
}

.elementor-nav-menu--dropdown {
    -webkit邊框半徑：15px；
  -moz-邊框-半徑：15px；
  邊框半徑：15px；
    will-change：過濾器；
}.elementor-nav-menu > li:nth-child(2) ul {
    寬度：300px！重要；
    邊距頂部：55px！重要；
    背景顏色：#ef6500！重要；
}

.elementor-nav-menu > li:nth-child(3) ul {
    寬度：300px！重要；
    背景顏色：#e8b736！重要；
    頂邊距：13px！重要；
}

.elementor-nav-menu > li:nth-child(4) ul {
    寬度：300px！重要；
    邊距頂部：55px！重要；
    背景顏色：#66cc9a！重要；
}

.elementor-nav-menu > li:nth-child(4) ul {
    寬度：300px！重要；
    上邊距：50px！重要；
}

.elementor-nav-menu > li:nth-child(5) ul {
    寬度：300px！重要；
    邊距頂部：25px！重要；
}

.elementor-子項目：懸停，
.elementor-sub-item.elementor-item-active {
    背景顏色：透明！重要；
    文字裝飾：底線！重要；
}</pre></p>

Answer 1

嘗試新增

-webkit-appearance: none;