javascript - 最小高度 : not working

Question

我有一个固定的容器，其结构如下所示。我的问题是，当我将子容器添加到 subContainer 时，子容器会给人一种它失去了 100% 高度的错觉。

诸如此类的事件。添加第一个子容器一切正常，第二个子容器 subContainer 给人的印象是它现在的高度为 99%，第三个子容器和 subContainer 看起来好像又回到了 100%；

宽度始终显示正确。这让我发疯，任何建议将不胜感激。

 <div id="containerr" style="width: 175px; height: 250px;overflow:hidden;display: inline-block;">

  <div id="subContainer" style="width:100%; height:100%;">


    <div style="width:100%;height:25%;"></div> 
    <div style="width:100%;height:55%;"></div>
    <div style="width:100%;height:15%;"></div>

  </div>

Answer 1

如果您计算一下，您会发现 250 像素的 25% 是 62.5 像素，其他百分比也类似。根据我所看到的

$('#subContainer > div:eq(0)').height()

看起来 FF 正在向上舍入，而 Chrome 正在向下舍入。一些快速谷歌搜索发现这是一个已知问题，例如。 http://ejohn.org/blog/sub-pixel-problems-in-css/