vh单位行为不一致

Question

我有一个伪元素，悬停在：

height: 0.4vh;

高度不会改变，只有宽度会改变。但是，出于某种原因，在某些条件下，不同伪元素的高度不同（这里的两条较暗的线都有height: 0.4vh）：

我把这个小提琴展示出来，但是意识到这取决于视口高度是否发生这种奇怪： https://jsfiddle.net/vuw693La/

我在Chromium和Firefox上遇到了这个问题。我做错了什么，或者没有办法让vh单位“像素完美”？

Answer 1

浏览器渲染中有一些不精确的地方，特别是当百分比或视口单元发挥作用时。在这种情况下，我会考虑是否真的值得将这些线的高度绑定到视口。对于大多数屏幕尺寸，似乎仅限于几个像差范围内;可以为它设置一个大小，或者在几个断点处设置静态大小以逐步扩展它。

.icon_piece::after { height: 1px; }

// tweak breakpoints to whatever works best for your design
@media (min-height: 600px) { 
  icon_piece::after { height: 2px; } 
}

@media (min-height: 900px) {
  icon_piece::after { height: 3px; }
}

Answer 2

某些浏览器在使用视口单元时会出现不一致，特别是小于1vw或1vh。

我解决这个问题的方法是分配更大的单位（例如乘以4），然后使用transform: scale(0.25);将元素恢复到所需的大小。

这不是一个简单的解决方案，因为您可能需要重新安排代码才能使其正常工作，但我找不到任何其他解决方法。