我创建了汉堡图标:
<button id="burger" class="btn btn-rounded burger">
<div></div>
<div></div>
</button>
在 Chrome 和 Firefox 上一切正常,但在 Safari 上,两个内部 div 根本不可见。似乎无法弄清楚问题..
这个 CSS 是:
.burger {
--size: 48px;
position: fixed;
padding: 1.25rem 0;
width: var(--size);
height: var(--size);
border-radius: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
top: 1rem;
right: 3rem;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 0.2rem;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: transparent;
cursor: pointer;
padding: 0;
z-index: 9960;
}
.burger:hover > div {
background: #fff;
}
.burger div {
width: 40%;
height: 2px;
background: var(--accent-blue);
border-radius: 10px;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
position: relative;
-webkit-transform-origin: 7px;
-ms-transform-origin: 7px;
transform-origin: 7px;
}
.burger-open > div:first-child {
-webkit-transform: rotate(45deg) translatex(2px);
-ms-transform: rotate(45deg) translatex(2px);
transform: rotate(45deg) translatex(2px);
background: #fff;
}
.burger-open > div:nth-child(2) {
-webkit-transform: rotate(-45deg) translatex(2px);
-ms-transform: rotate(-45deg) translatex(2px);
transform: rotate(-45deg) translatex(2px);
background: #fff;
}
..此外,测试浏览器兼容性的最佳方法是什么,而无需使用带有 iOS 的完整独立设备? Safari 浏览器似乎没有任何可用的开发工具