3

このペンを見てください: Firefox 21 のhttp://codepen.io/helloworld/pen/BAEcp角が丸い div には、Chrome 27 や IE10 にはないギャップがあります。

そのギャップは何ですか？roundArea クラスを削除し、高さのパーセント値を他の div の 1 つに追加して合計 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

に追加display:block;する.push-centerと、そのギャップがなくなります。

于 2013-06-19T20:44:10.573 に答える
0

.push-center には「vertical-align: top;」が必要です。

Firebug では、このスペースは Figure の上部と .push-center .roundedArea の上部の間のスペースであることがわかります。

于 2013-06-19T20:46:20.343 に答える