问题与疑问
当使用 display: table 和 display: table-cell 垂直对齐元素时,Firefox 溢出父容器宽度。查看现场演示以检查代码。
HTML
<div class="hew storeloader" href="/stores/arti-zen-eskilstuna-city">
<div class="holder hp100" style="height: 325px;">
<div class="storecontent">
<img alt="" src="/img/logo-white.svg">
<p>Arti.Zen Eskilstuna City</p>
</div>
</div>
</div>
CSS
section.stores .storeloader {
width: 47.82609%;
float: left;
margin-right: 4.34783%;
display: inline;
overflow: hidden;
background: #000;
color: #FFF;
text-align: center;
margin: 10px 0;
position: relative;
cursor: pointer;
section.stores .storeloader .holder {
width: 100%;
display: table;
}
section.stores .storeloader .holder .storecontent {
display: table-cell;
padding: 0 10px;
text-align: center;
vertical-align: middle;
text-transform: capitalize;
font-size: 20px;
}
最佳答案
通过 table-layout: fixed;
在容器上使用 display: table
解决
关于html - 显示 : table overflow parent div in firefox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20699816/