我现在在 CSS 方面遇到了一些问题，我不知道如何修复它。基本上我有一个引导卡，它使用 CSS 类在悬停时缩放。问题是，当鼠标悬停时，当它缩小时，<hr>我卡片中的一些内容就会消失，即使它们的 CSS 根本没有改变。这似乎是一个浏览器问题，因为它在 Safari 上完美运行，但在 Chrome 上却不行。您可以通过以下 URL 尝试：https://lereseauglt.fr（滚动到卡片轮播上的第二张幻灯片及之后，并将鼠标悬停在卡片上）。这是 HTML：<div class="card scaleIn">    <div class="card-body">        <div class="row w-100 m-0">            <div class="col-auto">[content]</div>            <div class="col">[content]</div>        </div>        <hr>        <div class="row w-100 m-0">            <div class="col-auto">[other content]</div>            <div class="col">[other content]</div>        </div>    </div></div>这是CSS：.scaleIn {    transition:all 0.1s ease-in-out;}.scaleIn:hover {    transform:scale(1.007);    cursor:pointer;}hr {    margin-top: 1rem;    margin-bottom: 1rem;    border: 0;    border-top: 1px solid rgba(0, 0, 0, 0.1);    box-sizing: content-box;    height: 0;    overflow: visible;}所以我的问题是：有什么办法可以解决这个奇怪的效果吗？多谢。