指定百分比高度时，Chrome 中的边框消失

Question

我有一个1-pixel-border 和height:29%的div。出于某种原因，Chrome 渲染它没有底部边框。

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

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

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

Answer 1

这是因为overflow:hidden;你在 div 上的样式，边框实际上出现在有问题的 div 之外，所以根据 div 的高度（它是一个 %），它不考虑这个边框。

查看您的代码，我建议将您的代码移至overflow:hidden;div (the td)的包含元素以解决问题，并且class="lower"如果它溢出，将对元素的内容产生相同的影响。