css - 除非根据(文本)行数放大或缩小，否则 1px 元素会消失

Question

所以这次我遇到了一个非常基本的问题，但尽管看了其他答案，我似乎还没有找到解决方案。

基本问题是我有一个包含文本的 div，该文本设置了 15px 填充 + 1px 边框。每当我在 div 中的行数不均匀时，底部边框就会消失；如果有偶数行，则不会。简单的解决方案是简单地使用偶数行并收工，但问题是我正在设计它供其他人使用，而他们中的大多数人不知道偶数行该插槽是必需的，否则不会发生错误。有什么办法可以解决这个问题，让其他人可以使用它而不必担心行数？

我曾经遇到过类似的问题，涉及 webkit 动画，导致边界在过渡前后变得模糊(我通过在 0px 处添加 webkit 模糊过滤器解决了这个问题)但这在这里不起作用...谢谢 :~(

代码片段(您可以在 jsfiddle 中看到其余部分):

#sidebar {
position:fixed;
width:200px;
padding:15px;
background-color:#fff;
border:1px solid #eee;
top: 50%;
transform: translateY(-50%);
-webkit-filter: blur(0px);
z-index:99999999999999;
}

https://jsfiddle.net/qxv7k564/

在这里你可以看到侧边栏的完整构建，你还可以看到我的第二个边框(我最初将 border-top 设置为描述以达到相同的效果，但它会模糊而不是消失同上原因，所以改成了这个)也消失了。删除其他元素似乎无法改变这个问题。

Answer 1

您强制 Chrome 进行亚像素计算，这通常会出现奇怪的行为。

如果您将输入的高度更改为 30 像素，那么 90% 的缩放可以正常工作(因为这是 27 像素)，但 75% 的缩放则不行(因为这是 22.50 像素)。

您也可以通过将边框宽度设置为 3px 来避免这种情况。在这种情况下，您会看到边框宽度在不同的地方是不同的。

无论如何，最好的解决方案是在输入周围留出更多空间，以便即使在亚像素位置也可以清晰地绘制边框。

引用:从堆栈上的另一个问题中提取。