检查时1px边框底部宽度是.8px？

Question

我的ul高200像素，里面有四个li，每个49px高w / 1px边框底部。

当我在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;
}