按钮的单击区域在更改其位置后会发生轻微偏移

Question

所以我有一个按钮来播放/暂停当前播放的歌曲。首先，当我刚刚测试它时，它运行良好。但在改变了位置后，可点击区域有了一点偏移。我试着把按钮的高度和宽度调大一点，添加了填充，并在检查页面中进行了检查，但似乎没有偏移。这是HTML:

.playbar {
background: transparent;
color: var(--secondarycolor);
border-radius: 2px;
border: none;
position: absolute;
width: 50vw;
height: 75px;
top: 1vh;
z-index: 1;
}
.playbar>* {
position: relative;
background: transparent;
border: none;
}
.title-name {
bottom: 2vh;
}
.author-name {
bottom: 3vh;
}
.duration {
bottom: 15vh;
left: 10vw
}
.ppbtn {
color: var(--secondarycolor);
font-size: 22px;
text-align: center;
left: 22.5vw;
bottom: 8vh;
width: 35px;
height: 35px;
}
.play-forward {
color: var(--secondarycolor);
font-size: 22px;
text-align: center;
bottom: 8vh;
left: 22.5vw;
width: 35px;
height: 35px;
}
.play-back {
color: var(--secondarycolor);
font-size: 22px;
text-align: center;
bottom: 8vh;
left: 22.5vw;
width: 35px;
height: 35px;
}

<!-- PlayingInfo -->
<div class="playbar">
<!-- <img src="" alt=""class="album-img"> -->
<p class="title-name">placeholder</p>
<p class="author-name">placeholder</p>
<audio class='currentplaying' src=""></audio>
<button class="play-back"><ion-icon name="play-back-outline"></ion-icon></button>
<button class="ppbtn"><ion-icon name="pause-outline"></ion-icon></button><!--This is the button that have this issue-->
<button class="play-forward"><ion-icon name="play-forward-outline"></ion-icon></button>
<p class="duration">0:00</p>
</div>

这就是它之前的定位：

.playbar{
background: #353535;
color: var(--secondarycolor);
border-radius: 2px;
border: none;
position: absolute;
width: 99vw;
height: 100px;
z-index: 1;
}
.playbar > *{
position: relative;
background: transparent;
border: none;
}
.title-name{
bottom: 2vh;
}
.author-name{
bottom: 3vh;
}
.duration{
bottom: 15vh;
left: 10vw
}
.ppbtn{
color: var(--secondarycolor);
font-size: 22px;
text-align: center;
left: 50vw;
width: 35px;
height: 35px;
cursor: pointer;
}
.play-forward{
color: var(--secondarycolor);
font-size: 22px;
text-align: center;
left: 50vw;
width: 35px;
height: 35px;
}
.play-back{
color: var(--secondarycolor);
font-size: 22px;
text-align: center;
left: 50vw;
width: 35px;
height: 35px;
}

Answer 1

也许这会有所帮助。

我把按钮包装在一个新的柔性div.button-bar中，这样你就可以独立于<button>s定位.button-bar。

按钮的可点击区域以灰色突出显示，并带有灰色边框，以便于查看。

单独的按钮类名称不再使用，但我保留了它们，因为您可能仍然想覆盖单独的按钮。

:root{
--secondarycolor: #F00;
}
.playbar {
background: transparent;
color: var(--secondarycolor);
border-radius: 2px;
border: none;
position: absolute;
width: 50vw;
height: 75px;
top: 1vh;
z-index: 1;
}
.playbar>* {
position: relative;
background: transparent;
border: none;
}
.title-name {
bottom: 2vh;
}
.author-name {
bottom: 3vh;
}
.duration {
bottom: 15vh;
left: 10vw
}
.button-bar {
display: flex;
flex-wrap: nowrap;
bottom: 8vh;
left: 22.5vw;
}
.button-bar>button {
font-size: 22px;
color: var(--secondarycolor);
padding: 8px;
background-color: #ddd;
border: 1px solid #ccc;
}

<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
<!-- PlayingInfo -->
<div class="playbar">
<!-- <img src="" alt=""class="album-img"> -->
<p class="title-name">placeholder</p>
<p class="author-name">placeholder</p>
<audio class='currentplaying' src=""></audio>
<div class="button-bar">
<button class="play-back"><ion-icon name="play-back-outline" class="stretched-link"></ion-icon></button>
<button class="ppbtn"><ion-icon name="pause-outline"></ion-icon></button>
<!--This is the button that have this issue-->
<button class="play-forward"><ion-icon name="play-forward-outline"></ion-icon></button>
</div>
<p class="duration">0:00</p>
</div>