我有一个 ul,它高 200 像素,里面有 4 里,每个高 49 像素,底部边框为 1 像素。
当我在 Chrome 中检查 li 时,(渲染的)边框底部是 .800000001912px。
我有百分比宽度但没有百分比高度。为什么我的底部边框表现得很奇怪?
最佳答案
这只有在你有 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;
}
关于css - 检查时 1px 边框底部宽度为 .8px?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27714224/