如何在 Chrome 上洗掉兩個嵌套 div 之間的奇怪空白。
<div class="bar">
<div class="progress">
</div>
</div>
.bar {
width: 200px;
height: 6px;
border: 1px solid black;
border-radius: 3px;
}
.progress {
height: 100%;
width: 50%;
background: black;
}
這是小提琴的鏈接：http : //jsfiddle.net/hfob7yz??4/1/。
在 Chrome 上，它對我來說看起來像
這樣，有奇怪的邊距。在 Firefox 上，它看起來很正常：
firefox-img
它還取決于螢屏寬度。問題只出現在我的筆記本電腦上。
謝謝
uj5u.com熱心網友回復：
原因是主 div 周圍有邊框，并且在某些螢屏上可見以避免此添加
.bar {
box-sizing: border-box;
}
在這里閱讀更多
uj5u.com熱心網友回復：
當處于不同的縮放級別時，您會遇到某種邊緣效果 - 系統計算中存在一些“遺留”像素，因為它試圖將部分 CSS 像素映射到可能構成現代螢屏上 CSS 像素的幾個螢屏像素.
不需要第二個內部 div，您可以使用線性漸變用背景影像繪制進度 - 這可以根據需要由 JS 動態更改。
.bar {
--progress: 50%;
width: 200px;
height: 6px;
border: 1px solid black;
border-radius: 3px;
background-image: linear-gradient(to right, black 0 var(--progress), transparent var(--progress) 100%);
}
}<div class="bar">
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/351433.html