尝试在此 site 上使用以下 CSS 在悬停时显示 H3 :
a > h3 {
min-width: 100% !important;
min-height: 100px;
max-height: 100px;
display: block;
position: absolute;
bottom: -80px;
color: #FFF;
padding: 25px 5px;
box-sizing: border-box;
-webkit-transition: all 300ms ease-in;
-moz-transition: all 300ms ease-in;
-ms-transition: all 300ms ease-in;
-o-transition: all 300ms ease-in;
transition: all 300ms ease-in;
a:hover > h3 {
bottom: 0;
}
出于某种原因,这在 Firefox 中的呈现方式与在 Chrome 和 Safari 中的呈现方式不同。当 min-height 设置为 100px 时,它在 Chrome 和 Safari 中工作正常,当它设置为 50px 时,它在 Firefox 中工作正常。
最佳答案
这可能是因为 Firefox(从版本 20.0.1 开始)仍然需要为 box-sizing
属性添加 -moz
供应商前缀,只需添加:
-moz-box-sizing: border-box;
关于css - Moz 在元素上的渲染高度与 Webkit 不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16221623/