私はホバーに表示される擬似的な要素があります。一貫性のないVHユニットの動作
height: 0.4vh;
高さが変化しない、唯一の幅がありません。何らかの理由で、しかし、特定の条件下で異なる擬似要素の高さは、（ここでは暗いラインの両方がheight: 0.4vhを持っている）が異なります。
私は証明するために、このバイオリンを出すが、それが依存することを実現しますビューポートの高さこの奇妙なことが起こるかどうか： https://jsfiddle.net/vuw693La/
この問題はChromiumとFirefoxで発生しています。何か間違っているのですか、vhユニットで「ピクセル完璧」になる方法はありませんか？
ブラウザのレンダリングには、特にパーセンテージまたはビューポートユニットが再生される際に、いくつかの不正確さがあります。この場合、ビューポートに結びつけられた線の高さを作ることが実際に価値があるかどうかを検討します。ほとんどの画面サイズでは、わずか数ピクセル以内に制限されているようです。多分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; }
}
ビューポートの高さを使用する値に応じて完全に分割することができない限り、自然に丸め処理が行われます。そして、これにより、同じ場所の「同じ」要素のレンダリングが異なる場合があります。なぜなら、すべての端数の合計が必ずしも100％になるわけではないからです。 @ジャックの答えは、最も実用的なソリューションIMHOです。 – CBroe
@CBroe丸めに関するご指摘をありがとうございます。ありがとうございます。私は 'calc（100vh * 0.004）'がその場合に一貫した高さを与えてくれたと思ったが、そのような運はない。 – jcuenod
'calc（100vh * 0.004）'はまだ '100vh'_actually_で動作します。ビューポートの高さを取って、任意の767ピクセルと言うと、.004のときも3.068ピクセルの結果が得られます。さて、サブピクセルレンダリングは、適度に適切なカウンターメジャーとして残しておきます。「全体」ピクセルのみで作業すると、複数の場所にあるピクセルの.068部分はまだどこかに移動する必要があります。それをXの場所で3ピクセルに丸めて、少なくとも1つの場所であなたを残してくれるでしょう。代わりにほとんどの時間（簡素化されていますが、私はあなたが私のドリフトを得ると思います）。 – CBroe