<hr> 在 CSS 变换中消失：scale()

Question

我现在在 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;

}

所以我的问题是：有什么办法可以解决这个奇怪的效果吗？多谢。

Answer 1

在我看来，问题的发生是由于zoom: 80%ID 元素的属性造成的containerCours。使用 DevTools 并注意缩放如何影响元素的边框顶部宽度hr- 您期望它是 1px，但实际上是 0.996px。然后，将鼠标悬停在已缩放的容器内缩放卡片，看起来hr似乎丢失了，但它实际上就在那里。元素的顶部边框太薄，以至于不可见。您可以尝试将 的顶部边框宽度更新hr为 1.2px，它将可见 - 再次检查 DevTools 并注意顶部边框宽度为 1.191px。我建议您重构容器缩放逻辑，因为否则您将不得不使用这种不确定的浮点单位。