只有Firefox在使用display: table-cell时无法实现100%高度

Question

只有Firefox在使用display: table-cell时无法实现100%高度

4

我试图通过将元素的父元素设置为display: table，然后将该元素设置为display: table-cell; vertical-align: middle;来使元素垂直居中。我还将元素的高度设置为34%，其父元素设置为100%，以便填充屏幕。

这在每个浏览器上都可以完美地工作（包括IE 8+），但是Firefox则会忽略高度并折叠到span元素的高度。

为什么会发生这种情况呢？

CSS

#homeNav ul {
  padding: 0;
  margin: 0;
  height: 100%;
}
#homeNav li {
  height: 34%;
  display: table;
  width: 100%;
}
#homeNav li a {
  min-height: 177px;
  height: 100%;
  line-height: 100%;
  display: block;
  text-decoration: none;
  font-size: 48px;
  border-bottom: 1px solid #fff;
  display: table-cell; vertical-align: middle;
}
#homeNav li a.last {
  border-bottom: none;
}
#homeNav li a:hover, #homeNav li a.active {
  background: none;
}
#homeNav li a span {
  padding: 50px 0 50px 100px;
  display: block;
  background: url(../images/main-nav-hover_bg-large.png) no-repeat;
  background-position: 120px 50px;
  padding-left: 160px;
}

- Amir Khan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adam · Accepted Answer

将所有高度声明去掉：一个设置为display: table-cell的项目作为某个设置为display: table的元素的子级，应始终是其父级的100%高度。

您还在同一元素上使用了display: block和display: table-cell。即使display: table-cell优先级更高（因为它最后出现），您也应该尽量保持代码整洁。

下面的代码在我的Firefox中可以工作：

HTML：

<div>
    <a href="#">test</a>
</div>

CSS:

div { display: table; height: 100px; border: 4px solid #000; width: 300px;}
a { display: table-cell; border: 4px solid #0f0; vertical-align: middle; text-align: center; }

JS Fiddle上的演示。