Разная высота стола 100% в Chrome/IE и FireFox

Question

Проблема в том, что все элементы (основной контейнер, контейнер таблицы и таблица) должны иметь высоту 100%. Сама таблица имеет немного меньший размер в Chrome и IE, чем в Firefox, что вызывает небольшой разрыв между границами .table-container и table.

Кто-нибудь знает, как это исправить? Я потратил почти весь день на это и не могу просто найти решение. Было бы полезно для любой помощи. Заранее спасибо.

Вот ссылка для скрипки с моей текущей задачи: fiddle link

<div class="container"> 
    <div class="buttons"> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    <div class="table-container"> 
     <table> 
      <thead> 
       <tr> 
        <td>1</td> 
        <td>2</td> 
        <td>3</td> 
        <td>4</td> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>a</td> 
        <td>b</td> 
        <td>c</td> 
        <td>d</td> 
       </tr> 
       <tr> 
        <td>aa</td> 
        <td>bb</td> 
        <td>cc</td> 
        <td>dd</td> 
       </tr> 
       <tr> 
        <td>aaa</td> 
        <td>bbb</td> 
        <td>ccc</td> 
        <td>ddd</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

и CSS:

html, body, .container, .table-container, table 
{ 
    height: 100%; 
} 

.container 
{ 
    display: block; 
    width: 500px; 
    margin: 0 auto; 
    text-align: center; 
} 

.table-container 
{ 
    width: 100%; 
    border: 1px solid red; 
    padding-top: 30px; 
    margin-top: -30px; 
} 

.buttons 
{ 
    height: 30px; 
} 

.buttons div 
{ 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    width: 25%; 
    float: left; 
    height: 30px; 
    border: 1px solid black; 
} 

table 
{ 
    border: 1px solid black; 
    width: 100%; 
    border-spacing: 0; 
} 

thead td, tbody td 
{ 
    width: 25%; 
    height: 25%; 
} 

Update: добавлена ​​обивка и отрицательный запас для .table-контейнера Update2: добавлен пограничный интервал и пограничный обвал к примеру. Все еще не работает должным образом. Update3: Теперь он работает здесь, а это значит, что я не смог полностью воспроизвести свою ошибку, чтобы показать ее вам :(Но в целом проблема заключается в том, что высота таблицы 5x5 в Chrome меньше от FF на 22px, который 22px промежуток между столом контейнера и сама таблица. Каждая ячейка имеет около 4px + в таблицу heigth в FF.

Answer 1

это, как представляется, интервал границы на столе.

Примените этот CSS к элемент таблицы:

border-spacing: 0; 

Answer 2

Имейте в виду, что

width: 100%; 

не работает точно так же, как

height: 100%; 

делает.

В то время как ширина: 100% занимает 100% от ширины родителя, даже если не было явной установки этой ширины, высота: 100% работает только с элементами, у родителей которых установлена ​​фиксированная высота.

Проще говоря,% -width применяется динамически, в то время как% -hight применяется к высотам контейнера статических родителей.