Html Firefox在css圆角div上呈现间隙

看看这支笔：在Firefox21中，在带有圆角的div上有一个与Chrome27或IE10不同的间隙

这个差距是什么？当我删除roundArea类并将“高度百分比”值添加到另一个div中以获得100%的总和时，间隙被删除

<div id="chartBody">
      <div style="border:black solid 1px;">
        <figure>              
          <div class="push-center" style="height:25%;">1th test</div>
          <div class="push-center" style="height:50%;">2nd test</div>
          <div class="push-center" style="height:25%;">3rd test</div>
        </figure>
        <figcaption>
          <div class="push-center"></div>
        </figcaption>
      </div>

      <div>
        <figure>
          <div class="push-center roundedArea" style="background-color:#fff;height:22%;"></div>
          <div class="push-center diagram" style="background-color:#ff99cc;height:11%;">3</div>
          <div class="push-center diagram" style="background-color:#ff33cc;height:44%;">44</div>
          <div class="push-center diagram" style="background-color:#ff66cc;height:23%;">36</div>
        </figure>
        <!-- data-bind="text: title" -->
        <figcaption>
          <div class="push-center">ak</div>
        </figcaption>
      </div>      
    </div>
<div id="chartFooter">
      <div class="push-center">tests</div>
      <!-- foreach: denies -->
      <!-- data-bind="text: deny" -->
      <div class="push-center">6</div>      
</div>



body, html,figure,figcaption{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    font-family:arial; 

}

*{ /* Every element which has a border or padding value puts this value inside the div */
  box-sizing:border-box;
  -moz-box-sizing:border-box;
}

.push-center
{   
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  width:100%;  /* FF fix */
  text-align:center; /* FF fix */
}

#chartBody{
  background-color:white;
  height:90%;
}

.roundedArea{
  border-radius: 5px;
  border: gray dashed 1px;  
}

.clear{
  clear:both;
}

.diagram
{
  color:white; 
  font-weight:bold;
  border-bottom:white solid 1px;
}

figcaption div{
  text-transform:uppercase;
  height:100%;
}

figcaption{
  height:10%;
}

figure {
  height:90%;
}

#chartBody > div  {
  height:100%;  
  float:left;
}

#chartBody > div:nth-of-type(1), #chartFooter > div:nth-of-type(1)
{
  margin-left:10px;
}

#chartBody > div:nth-of-type(n+1), #chartFooter > div:nth-of-type(n+1)
{
  width:80px;
  margin-right:20px;
}

#chartBody > div:nth-of-type(2) ~ div, #chartFooter > div:nth-of-type(2) ~ div
{
  width:40px;
  margin-right:10px;
}

#chartFooter{
  padding-top:5px;
  height:10%;
  border-top:#000 solid 1px;  
}

#chartFooter div{   
  float:left;
}

第1次试验
第二次试验
第三次试验
3.
44
36
ak
测验
6.
正文、html、图、figcaption{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
字体系列：arial；
}
*{/*每个具有边框或填充值的元素都将该值放入div中*/
框大小：边框框；
-moz框大小：边框框；
}
.推中心
{   
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit盒包：中心；
-莫兹盒包装：中心；
-ms-flex-pack:center；
-webkit内容：中心；
证明内容：中心；
-webkit框对齐：居中；
-moz框对齐：居中；
-ms-flex-align：居中；
-webkit对齐项目：居中；
对齐项目：居中；
宽度：100%；/*FF固定*/
文本对齐：居中；/*FF固定*/
}
#图表体{
背景色：白色；
身高：90%；
}
圆德雷亚酒店{
边界半径：5px；
边框：灰色虚线1px；
}
.清楚{
明确：两者皆有；
}
.图表
{
颜色：白色；
字体大小：粗体；
边框底部：白色实心1px；
}
菲卡普顿分区{
文本转换：大写；
身高：100%；
}
菲卡普顿{
身高：10%；
}
身材{
身高：90%；
}
#chartBody>div{
身高：100%；
浮动：左；
}
#chartBody>div:n类型（1），#chartFooter>div:n类型（1）
{
左边距：10px；
}
#chartBody>div:n类型（n+1），#chartFooter>div:n类型（n+1）
{
宽度：80px；
右边距：20px；
}
#chartBody>div:n类型（2）~div，#chartFooter>div:n类型（2）~div
{
宽度：40px；
右边距：10px；
}
#图表页脚{
垫面：5px；
身高：10%；
边框顶部：1000个实心1px；
}
#图表页脚div{
浮动：左；
}

有关间隙，请参见此图：

---

添加

显示：块到
。推中心
，间隙就会消失。
。推中心需要“垂直对齐：顶部；”

在Firebug中，您可以看到空格是图形顶部和.push center.roundedArea顶部之间的空格。
无法在FF 21中复制该bug。看起来不错，你有截图吗？@Duniyadnd是的，我用一张图片更新了我的问题：）底部的“AK”也放错地方了，很奇怪。@Adrift是的，谢谢你的发现，我同意。当我将窗口的大小调整得更小时，AK流入上面带有“36”的div中，这不在Chrome27/IE10中发生。当您移除
显示：-moz框时，AK得到修复.push center
规则的code>，根据MDN（），该规则已被取代且不应使用..您发现可以修复症状，但原因是什么，因为在Chrome/IE中，它在没有该规则的情况下工作！我想你会在这里找到确切的答案：。如果未设置某些特定属性（在您的示例中，弯曲方向可能是错误的属性），我认为FF可能会指定默认值，从垂直轴的中间而不是从顶部分布元素。所以我猜在你的例子中，.push center元素作为一个组从90%容器空间的中间居中，但是因为它们的高度不同，所以在顶部和底部会有一个偏移。当我这样做时，整个布局/对齐都会被破坏。这不是一个解决办法。