Html 文本在悬停按钮时移动

我正在使用有角度的材质来构建一个应用程序。我想使用

mat stroked按钮

，但遇到了一个问题。正如您在下面的gif中所看到的，每当我将鼠标悬停在按钮上时，所有文本都会快速向下移动，然后再向上移动。我不明白为什么会这样

以下是HTML：

<div id="home">
  <div id="side">
    <div id="info">
      <h1>{{title}}</h1>
      Info here
    </div>
    <div id="navigation">
      <button mat-stroked-button *ngFor="let item of menuItems">{{item}}</button>
    </div>
  </div>
  <div id="content">
    <button mat-stroked-button>BUTTON</button>
    <router-outlet></router-outlet>
  </div>
</div>

styles.css：

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

body, html, #home{
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
}
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

我在stackblitz上复制了这个问题：

---

谢谢。

尝试添加覆盖样式以使按钮悬停

button[mat-stroked-button], button[mat-stroked-button]:hover {

---

在

app/appcomponent.css

中，删除

translate

属性，然后尝试以下代码。它将阻止元素跳跃

#home{
  position: absolute;
  display: flex;
  top: 2%;
  left: 2%;
  margin: auto;
  width: 95%;
  height: 95%;
}

---

我们能看到你的css吗？@EmandM添加了所有css。没有办法复制这个。我尝试过CodePen和加载angular材质，但它在3种不同的浏览器（Safari、Chrome和Firefox）中都能正常工作。这可能是无数不同的事情，也可能是一些简单而琐碎的事情。尝试找到一种方法来提供更多的代码，或者让我们在某个地方访问代码，或者——甚至更好地——跳转到您的开发工具中，并观察该按钮上的css（比较计算值），查看“正常”按钮和“悬停”按钮。实际上，通过调试代码而不放弃，您可以学到最多的东西。@NemanjaGlumac我一直在尝试使用DevTools，但我已经没有什么想法了。我在stackblitz上复制了这个问题。你可以在我的帖子里找到这个链接。谢谢你。@Jesper-再说一次，对我来说，在不同的浏览器上一切都很好。下面是FF（）、Chrome（）和Safari（）。您使用的是哪个浏览器，您是否尝试过其他浏览器？在主题输入之后放置覆盖在所有CSSIt之前放置主题导入-导入的CSS来自

样式.CSS

。我更新了我的帖子，让它更清晰。谢谢，这很有效。唯一的问题是，我希望在边缘周围都有空白，当我删除宽度和高度时，空白就不再存在了。关于如何保留空白有什么建议吗？@Jester-将所需的填充值设置为

#home

的父项-我猜是正文。@Jesper请尝试上面的代码。注意跳跃和空格。您可以根据需要随意调整值。@Jester-因为您已将

#home

设置为

位置：绝对值

，并将其从流中删除。你到底为什么要这样做，还要让自己头疼的是写下8行代码来“居中”——我不知道。但是，现在很明显，您在一些非常基本的（理解）CSS方面存在一些严重的问题。我建议你在继续这个项目之前先熟悉基本概念。否则，你会进入兔子洞，在这里询问每一个新的“bug”，将会有很多。是的，但前提是你在学习的过程中打破它，然后自己调试它。因为，为了调试一些东西，你必须学习。在很多情况下，这么做是很好的，但是如果你不理解基本概念（比如边距和填充），这对你没有帮助。您将复制并粘贴代码，它将工作，但您仍然不知道它为什么工作。这是非常误导和危险的。

#home{
  position: absolute;
  display: flex;
  top: 2%;
  left: 2%;
  margin: auto;
  width: 95%;
  height: 95%;
}