3

看看这支笔： Firefox 21 中的http://codepen.io/helloworld/pen/BAEcp在圆角的 div 上方有一个间隙，这在 Chrome 27 或 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;
}

看到这张图片的差距：

在此处输入图像描述

4

2 回答 2

0

.push-center 需要“垂直对齐：顶部；”。

在 Firebug 中，您可以看到空间是图形顶部和 .push-center .roundedArea 顶部之间的空间。

于 2013-06-19T20:46:20.343 回答
0

加起来display:block;，.push-center这个差距就会消失。

于 2013-06-19T20:44:10.573 回答