我在使用 firefox 时遇到问题,在已显示表格单元格的 div 上使用相对位置,firefox 忽略了相对位置,因此我在表格单元格内的绝对定位元素无法正确显示。您可以在以下位置查看我的示例页面:http://dev.aaronpitts.ch/lhc/它在 webkit 等中运行良好,因此您可以看到我想要实现的目标。尝试这样做没有帮助:http://wisercoder.com/firefox-displaytable-cell-and-absolute-positioning/
我受影响的代码是:
<div class="css-table">
<article id="crystallization">
<a href="#"></a>
<h2><i class="fa fa-arrow-circle-o-right icon-margin-r"></i> Crystallisation</h2>
<div class="service-hover">
<p>1) A comprehensive approach , from conceptualization & development through to realization</p>
<p>2) ^^ for global/hospitality projects</p>
<p>3) Our full range of services provide unique knowledge on the management of hospitality professionals, securing sustainable returns for your investments</p>
</div>
</article>
<div class="cell-space"></div>
<article id="consulting">
<a href="#"></a>
<h2><i class="fa fa-arrow-circle-o-right icon-margin-r"></i> Consulting</h2>
<div class="service-hover">
<p>1) Extensive industry experience and knowledge, combined with the ability to listen</p>
<p>2) Our integrative product offering provides you with innovative solutions that meet your specific needs</p>
</div>
</article>
</div>
还有CSS:
.css-table {
display: table;
width: 100%;
}
#management-consulting article {
background-size: cover;
background-position: center center;
position: relative;
}
#management-consulting article a {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 2000;
}
#management-consulting article:hover h2 {
opacity: 0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#management-consulting article h2 {
background: rgba(0, 0, 0, 0.7);
padding: 20px;
position: absolute;
color: #FFF;
font-weight: 200;
text-transform: none;
}
#crystallization {
width: 60%;
display: table-cell;
background-image: url(../img/crystallization.jpg);
height: 400px;
}
#crystallization h2 {
bottom: 30px;
right: 30px;
}
.cell-space {
width: 2%;
display: table-cell;
}
#consulting {
width: 35%;
background-image: url(../img/consulting.jpg);
display: table-cell;
}
#consulting h2 {
top: 30px;
left: 30px;
}
.service-hover {
opacity: 0;
background: rgba(0, 0, 0, 0.7);
padding: 30px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
font-family: "ff-dagny-web-pro",sans-serif;
font-style: normal;
font-weight: 200;
font-size: 20px;
font-size: 1.25rem;
color: #FFF;
}
#management-consulting article:hover .service-hover {
opacity: 1;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
最佳答案
Gecko 目前不支持表格单元格绝对包含 block 。参见 https://bugzilla.mozilla.org/show_bug.cgi?id=63895
请注意,此处的相关规范文本位于 http://www.w3.org/TR/CSS21/visuren.html#choose-position并说:
The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
关于css - Firefox 未使用位置 :relative with table-cell,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19697871/