gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 14:41:32 27 4
gpt4 key购买 nike

在每个主要浏览器 (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 中的样子: enter image description here

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

最佳答案

http://jsfiddle.net/c3bfzLhj/

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

关于html - 在 Firefox 中显示表格布局损坏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52882464/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com