Html 如何在切换垫滑块的显示时防止屏幕上的内容跳转

如果我将鼠标悬停在音量图标上，它会添加一个垫子滑块

这会将整个内容往下推，我如何才能防止这种情况

可在本文件中复制

将鼠标悬停在图标下方以查看跳跃

您只需添加到SASS文件中即可

.mat-icon-button{
    padding-top:8px;
  }

默认情况下，卷将8px添加到顶部填充。可以避免重新对齐的镜像

.volume-controls {
    .mat-icon-button{
        padding-top:8px;
      }
...

关于你的第二个问题，你所要做的就是确定你的容器的大小。我想这将是更简单的方法：

  .volume-controls {
    display:block;
    height:55px;
    max-height:55px !important;

---

谢谢，但它仍然会将内容推到下面

  .volume-controls {
    display:block;
    height:55px;
    max-height:55px !important;