时间戳

首页 > 解决方案 > 在 Firefox 中显示表格布局损坏

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

问题描述

在每个主流浏览器（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 中的样子： 在此处输入图像描述

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

标签： htmlcssfirefox

解决方案

http://jsfiddle.net/c3bfzLhj/

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

推荐阅读