时间戳

首页 > 解决方案 > Safari 上的 CSS 项目重叠

javascript - Safari 上的 CSS 项目重叠

问题描述

我正在为我的应用程序创建一个音频播放器，它有一个暂停/播放按钮、下一个按钮和后退按钮。我只在返回/暂停按钮相互重叠的 Safari 上遇到问题。播放/暂停按钮取决于当前的播放状态。在 Chrome、firefox 和 IE 上没有重叠。我只是在 safari 上遇到问题，有人可以帮忙吗？Styles.pause/styles.play 与 styles.back_container 重叠

  const [play, setPlay] = useState(false)

            <div className = {styles.play_container}>
            <div className={play ? styles.pause : styles.play} onClick={handlePlay}></div>
                <div className = {styles.next_container} onClick={()=>handleNext()}>
                    <div className={styles.skip1}></div>
                    <div className={styles.skip2}></div>
                </div>
                <div className = {styles.back_container} onClick={()=>handleBack()}>
                    <div className={styles.back1}></div>
                    <div className={styles.back2}></div>
                </div>
            </div>

.play_container{
    display: flex;
    top: 40%;  
    position: absolute;
    z-index: 2000;
    height: 2%;
    width: 68%;
    /* left: 70px; */
    justify-content: center;
}
.pause{
    z-index: 2100;
    height: 20px;
    border-style: double;
    border-width: 0px 0px 0px 19px;
    border-color: #202020;
    visibility: visible;
    cursor: pointer;
}

.play{
    z-index: 2100;
    border-style: solid;
    height: 20px;
    border-width: 10px 0px 10px 15px;
    border-color: transparent transparent transparent #202020;
    box-sizing: border-box;
    visibility: visible;
    cursor: pointer;
}
.next_container{
    display: flex;
    position: absolute;
    z-index: 2100;
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-left: 100px;
    justify-content: center;
}

.back_container{
    display: flex;
    position: absolute;
    z-index: 2100;
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-right: 100px;
    justify-content: center;
}
.skip1{
    z-index: 2100;
    width: 20px;
    height: 5px;
    border-style: solid;
    border-width: 7px 0px 7px 7px;
    border-color: transparent transparent transparent #202020;
    box-sizing: border-box;
    visibility: visible;
    margin-top: 3px;
}

.skip2{
    z-index: 2100;
    height: 14px;
    border-left: 2.5px solid #202020;
    visibility: visible;
    margin-right: 10px;
    margin-top: 3px;
}

.back1{
    z-index: 2100;
    height: 14px;
    border-left: 2.5px solid #202020;
    visibility: visible;
    margin-left: 10px;
    margin-top: 3px;
}
.back2{
    z-index: 2100;
    width: 20px;
    height: 5px;
    border-style: solid;
    border-width: 7px 7px 7px 0px;
    border-color: transparent #202020 transparent transparent;
    box-sizing: border-box;
    visibility: visible;
    margin-top: 3px;

}

标签： javascripthtmlcssnext.js

解决方案

这是一个奇怪的问题，但我发现如果我为 back_container 指定一个左值并使用我能够按预期定位的变换：

.back_container{
display: flex;
position: absolute;
z-index: 2100;
width: 20px;
height: 20px;
cursor: pointer;
margin-right: 100px;
justify-content: center;
left: 50%;
transform: translateX(-100px);
}

左值使后退按钮居中（在播放按钮的顶部），变换将其移回所需的 100 像素。我个人会制作一个容器，它是控件所需的宽度，并将它们与 flexbox 或网格对齐（也许 flex 之间有合理的空间），然后将播放容器居中，但上面的代码应该是一个快速修复。

推荐阅读