Moz渲染底部属性不同于Webkit

Question

尝试在悬停时使用以下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中呈现的效果不同。

Answer 1

由于某些原因，safari计算"min-width"为250px, firefox计算为100%!

因此，在safari中，框的布局是25x100 (ok)，但在firefox中是240x50。这可能就是问题所在。这100%来自哪里(也许在同位素的js文件中的某个地方?)