<p>我建了一个网站，但在Safari浏览器上的菜单表现得很奇怪。请查看下面的视频，我在视频中展示了问题。只有在Safari浏览器中出现问题，其他浏览器都正常。</p>
<p>可以在此处查看Safari中的问题视频 https://vimeo.com/757367403</p>
<p>这是我的CSS，有人知道一些技巧来解决这个问题吗？</p>
<pre class="brush:php;toolbar:false;">@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
.elementor-nav-menu {
align-items: center;
}
.elementor-nav-menu * {
font-family: "Lato", sans-serif !important;
}
html[lang="kl-kl"] .elementor-nav-menu > li:nth-child(4) a {
font-size:16px!important;
padding: 15px 0px!important;
}
.elementor-nav-menu > li:first-child {
background-color: #00aeef;
zoom: 0.85;
}
.elementor-nav-menu > li:nth-child(2n) {
background-color: #ef6500!important;
width:170px!important;
height:170px!important;
zoom:0.9!important;
}
.elementor-nav-menu > li a {
flex-grow: 0!important;
}
.elementor-nav-menu > li:nth-child(7n) {
background-color: #e8b736!important;
zoom:0.85;
}
.elementor-nav-menu > li:nth-child(3) {
background-color: #e8b736!important;
width:220px;
height:220px;
padding:0 10px!important;
}
.elementor-nav-menu > li:nth-child(4n) {
background-color: #66cc9a!important;
zoom:0.85;
}
html[lang="kl-kl"] .elementor-nav-menu > li:nth-child(4n) {
background-color: #66cc9a!important;
zoom:1.05!important;
padding:0 0px!important;
}
.elementor-nav-menu > li:nth-child(4) {
margin:0 auto;
}
.elementor-nav-menu > li:nth-child(5n){
background-color: #00aeef;
zoom:1.1;
}
.elementor-nav-menu > li:nth-child(6) {
width:180px!important;
height:180px!important;
}
.elementor-nav-menu > li:nth-child(5) {
width:170px!important;
height:170px!important;
}
.elementor-nav-menu > li {
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 50%;
background-size: cover;
background-repeat: none;
width:139px;
height:139px;
text-align:center;
margin:0 10px!important;
display: flex; /* or inline-flex */
align-items: center;
justify-content: center;
filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.75));
}
.elementor-nav-menu > li a {
color:#fff!important;
font-size: 18px!important;
word-wrap: break-word!important;
word-break: break-word!important;
white-space: normal!important;
line-height:26px;
text-align:center;
}
.elementor-nav-menu > li a:hover {
line-height:30px;
}
.elementor-nav-menu li a .sub-arrow {
display:none;
}
.elementor-nav-menu > .sub-menu:nth-child(3) {
background-color:red;
}
.elementor-nav-menu--dropdown li a {
justify-content: center;
}
.elementor-nav-menu--dropdown {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
will-change: filter;
}
.elementor-nav-menu > li:nth-child(2) ul {
width: 300px!important;
margin-top: 55px!important;
background-color: #ef6500!important;
}
.elementor-nav-menu > li:nth-child(3) ul {
width: 300px!important;
background-color: #e8b736!important;
margin-top: 13px!important;
}
.elementor-nav-menu > li:nth-child(4) ul {
width: 300px!important;
margin-top: 55px!important;
background-color: #66cc9a!important;
}
.elementor-nav-menu > li:nth-child(4) ul {
width: 300px!important;
margin-top: 50px!important;
}
.elementor-nav-menu > li:nth-child(5) ul {
width: 300px!important;
margin-top: 25px!important;
}
.elementor-sub-item:hover,
.elementor-sub-item.elementor-item-active {
background-color: transparent!important;
text-decoration: underline!important;
}</pre></p>
1
925
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
尝试添加