我试图通过将其父元素设置为display: table
然后将元素设置为来垂直居中元素display: table-cell; vertical-align: middle;
。我还将元素的高度设置为34%
,并将其父级设置为100%
填充屏幕。
这在除 Firefox 之外的所有浏览器(包括 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;
}