小编Ami*_*han的帖子

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

这在每个浏览器(包括IE 8+)上都能很好地运行,但是Firefox.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 …