1

我有一个1-pixel-border 和height:29%的div。由于某种原因,Chrome 将其呈现为没有底部边框。

http://jsfiddle.net/9WVuC/4/

这个问题取决于实际的百分比值和容器大小;当我更改它们时,边框有时会出现有时会消失。Chrome 渲染引擎在计算实际div的高度时似乎存在一些舍入误差。此外,仅当为该div指定溢出位置时才会发生时才会发生这种情况。

这是一个已知的错误,也许存在一些解决方法?当然,我可以通过手动重新计算高度并使用 JS 设置它来摆脱那个百分比值,但这不是一个非常优雅的解决方案。

4

4 回答 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 回答