Firefox делает пробел по кругу угла css div

Посмотрите на это перо: http://codepen.io/helloworld/pen/BAEcp в Firefox 21 над div с круглыми углами есть промежуток, который отсутствует в Chrome 27 или IE10.Firefox делает пробел по кругу угла css div

Что это за пробел? Когда я удаляю класс 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; 
}

см это изображение щели:

enter image description here

источник

2013-06-19 HelloWorld

Невозможно воспроизвести эту ошибку в FF 21. Выглядит хорошо, у вас есть скриншот? – Duniyadnd

@Duniyadnd да, я обновил свой вопрос с изображением :) – HelloWorld

«AK» на дне тоже неуместен, довольно странно. – Adrift

.push-center нуждается в "вертикальном выравнивании: сверху;".

В Firebug вы можете видеть, что пространство - это пространство между верхней частью фигуры и вершиной .push-center .roundedArea.

источник

2013-06-19 20:46:20 Deborah

Вы обнаружили исправление симптома, но в чем причина, потому что в Chrome/IE он работает без этого! – HelloWorld

Я думаю, вы найдете точный ответ здесь: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes. Если некоторые из определенных свойств не установлены (в вашем примере может быть витиеватое свойство), я думаю, что FF, по-видимому, задает значение по умолчанию для распределения элементов с середины вертикальной оси, а не сверху. Поэтому я предполагаю, что в вашем примере элементы .push-center как группа сосредоточены с середины 90% -ного пространства контейнера, но поскольку они разные высоты, вы получаете смещение сверху и снизу. – Deborah

добавить display:block; в .push-center и этот разрыв будет уходить.

источник

2013-06-19 20:44:10 Frank

Когда я это делаю, весь макет/выравнивание нарушается. Это не решение. – HelloWorld

Firefox делает пробел по кругу угла css div

ответ

Смежные вопросы