css - 检查时 1px 边框底部宽度为 .8px？

Question

我有一个 ul，它高 200 像素，里面有 4 里，每个高 49 像素，底部边框为 1 像素。

当我在 Chrome 中检查 li 时，(渲染的)边框底部是 .800000001912px。

我有百分比宽度但没有百分比高度。为什么我的底部边框表现得很奇怪？

Answer 1

这只有在你有 margin 时才会发生或 padding或 border-top <ul> 上的值或 <li>您在计算中没有考虑的元素，因为它可能正在调整边框以适应其容器高度。

这是一个在 chrome 中测试过的 JS Fiddle，它完全按照你说的做，但它肯定会以 1px 的值呈现底部边框:http://jsfiddle.net/j5am2sqe/

html:

<ul class="list">
   <li class="list-item" />
   <li class="list-item" />
   <li class="list-item" />
   <li class="list-item" />
</ul>

CSS:

ul {
    height: 200px;
}

li {
    height: 49px;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    background-color: red;
    border-bottom: 1px solid black;
    margin: 0px;
    padding: 0px;
}