<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。

我建议您重构容器缩放逻辑，因为否则您将不得不使用这种不确定的浮点单位。