私の子供はなぜ高さですか？100％は完全なピクセルではありませんか？

Question

私はここに非常に単純なロードバーがあります：Chromeで私の1080モニタ表示で

https://codepen.io/Ha1fDead/pen/LjKpjQ

.progress-bar { 
    width: 200px; 
    height: 62px; 
    background-color: teal; 
    border: 6px solid black; 
} 

.progress-bar-shade { 
    width: 66%; 
    height: 100%; 
    background-color: red; 
} 

<div class="progress-bar-container"> 
    <div class="progress-bar"> 
    <div class="progress-bar-shade"> 
    </div> 
    </div> 
</div> 

を、これはうまく表示されます。私の1440Pモニター上しかし

ディスプレイには、視覚的なエラーがあります：

（親の境界にクリップする背景の1pxの上下に注意してください）。

（ズームインした後、別のグラフィカル・エラー）

Iは、ブラウザを使用して（も1080ディスプレイ上に複製する）問題を変えることができるズームインするように制御する。これらの場合には、時々シェードの色は1px短くなります（ティールの背景は下に表示されます）。私はあらゆる方向（上のボーダー、左のボーダー、右のボーダー、下のボーダー）でこれを気付いた。私がこれを複製できない唯一のブラウザは、常に正しく表示されるFirefoxです。

box-sizing: border-boxを指定すると動作が若干変更されますが、ズームインすると同じ問題が発生します。

このピクセルの不完全さを引き起こす原因は何ですか？どのように修正できますか？

Answer 1

borderと実際には、outlineを使用して問題を解決します。あなたがコメントで推測したように、ほぼ確実に丸め誤差です。

実際の計算された高さではなく、レンダリングエンジンに当てはまるため、私は推測できます。

borderを使用すると、オブジェクトの高さと幅に12pxが追加されます。しかし、ズームすると12pxと外側のdivが別々に乗算されて加算されます。つまり、内側のdivの高さは境界線の表示幅に依存します。しかし、outlineを使用している場合、inner divは境界線の太さを気にせず、後で適用されるので、外側divの正確な高さを単純にコピーできます。これはまた、より小さな境界幅でグリッチが目立たない理由を説明するだろう。

いずれかの方法で、ここにあなたのコードではなくoutlineを使用します：

.progress-bar-container { 
 
    
 
} 
 

 
.progress-bar { 
 
    width: 200px; 
 
    height: 62px; 
 
    background-color: teal; 
 
    outline: 6px solid black; 
 
} 
 

 
.progress-bar-shade { 
 
    width: 66%; 
 
    min-height: 100%; 
 
    background-color: red; 
 
    border: none; 
 
}

<div> 
 
    <div class="progress-bar-container"> 
 
    <div class="progress-bar"> 
 
     <div class="progress-bar-shade"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>