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

Question

我有一个 div ，带有1像素边框和高度：29％。由于某些原因，Chrome会在没有底部边框的情况下呈现它。

请参阅http://jsfiddle.net/9WVuC/4/

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

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

Answer 1

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

查看您的代码，我建议您将overflow:hidden;移动到修复问题的div（td）的包含元素，并对{{1}的内容产生相同的影响元素如果溢出。

Answer 2

您可以通过将高度设置为height: 28.95%;

来修复此“错误”

确保不使用表格进行布局。它们只应用于表格数据。

Answer 3

降低高度或删除溢出：隐藏

lower{
height: 28%;
position: relative;
overflow: hidden;
border: solid 1px black;
}

Fiddle demo

Answer 4

这可能是一个渲染问题，具体取决于屏幕/窗口大小和元素的计算大小（带小数）。对我来说，一个解决方法是在边框丢失的地方放置一个不可见的box-shadow并修复渲染。对于底部边框，它看起来像这样：

box-shadow: 0 1px 0 0 rgba(255,255,255,0);