我有一个1-pixel-border 和height:29%的div。由于某种原因，Chrome 将其呈现为没有底部边框。
这个问题取决于实际的百分比值和容器大小；当我更改它们时，边框有时会出现有时会消失。Chrome 渲染引擎在计算实际div的高度时似乎存在一些舍入误差。此外，仅当为该div指定溢出和位置时才会发生时才会发生这种情况。
这是一个已知的错误，也许存在一些解决方法？当然，我可以通过手动重新计算高度并使用 JS 设置它来摆脱那个百分比值，但这不是一个非常优雅的解决方案。
问问题
6342 次
4 回答
5
这是因为overflow:hidden;您在 div 上的样式，边框实际上出现在所讨论的 div 之外，所以根据 div 的高度（它是一个 %）它没有考虑这个边框。
查看您的代码，我建议您将您overflow:hidden;移至 div 的包含元素（the ），以解决问题，并且如果溢出td，将对元素的内容产生相同的影响。class="lower"
于 2012-10-18T11:08:11.363 回答
0
您可以通过将高度设置为来修复此“错误”height: 28.95%;
确保不要使用表格进行布局。它们应该只用于表格数据。
于 2012-10-18T10:59:27.853 回答
0
降低高度或移除溢出：隐藏
lower{
height: 28%;
position: relative;
overflow: hidden;
border: solid 1px black;
}
于 2012-10-18T11:00:16.697 回答
0
这可能是一个渲染问题，具体取决于屏幕/窗口大小和元素的计算大小（带小数）。对我来说，一个解决方法是box-shadow在缺少边框的地方放置一个不可见的，它可以修复渲染。对于底部边框，它看起来像这样：
box-shadow: 0 1px 0 0 rgba(255,255,255,0);
于 2016-10-11T09:03:28.157 回答