html - 在 Firefox 中显示表格布局损坏

Question

在每个主要浏览器 (Chrome/Safari/IE/Edge) 和 Firefox 中都试过了。适用于除 Firefox 之外的所有内容，其中文本会被向下推。

.auto-height {
display: table;
height: 100%;
}
.full-height-section {
display: table-cell;
height: 100%;
width: 49%;
background-image: url("https://preview.ibb.co/iNcv0f/ladysquats.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.half-content {
width: 100%;
height: 100%;
vertical-align: top;
padding: 60px 30px;
}
.half-content h2, .half-content p, .half-content ul {
text-align: center;
}
.half-content .img-size-payment-type {
width: 65%;
}
button.colour-dark-pnk, button.colour-light {
font-size: 1em;
margin-top: 25px;
padding: 10px 60px;
border: 0 solid #f4a2a4;
border-radius: 0;
cursor: pointer;
}
}

<div class="how-works-section-six-container auto-height mobile-screen-hide">
<div class="full-height-section">
</div>
<div class="section-six half-content">
<h2>IPSUM LOREM</h2>
<p>  <img class="img-size-payment-type" src="https://preview.ibb.co/f0Ea0f/metodos-pago.png"><br>
  <a href="/shop"><button class="colour-dark-pnk">Order now</button></a></p>
<h2 class="font-colour-dark-pnk">Test Title</h2>
<p>Ipsum Lorem Ipsum Lorem:</p>
<ul class="box-pnk">
<li>Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem.</li>
<li>Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem.</li>
</ul>
</div>
</div>

它在 FF 中的样子:

更奇怪的是，一旦使用“检查元素”，问题就消失了，这意味着很难看出发生了什么。看起来像一个真正的浏览器错误？

Answer 1

http://jsfiddle.net/c3bfzLhj/

将所有 height:100% 更改为 min-height:100% 这是一个 Firefox 错误。两周前，我在开发我的网络应用程序时遇到了这个问题。