html - Firefox 无法正确显示标题

Question

我对我之前的帖子有疑问: Animation stop with css3

slider 在 Chrome 中运行完美。但是在 Firefox 中它不能正常工作。这里有人有想法吗？

可以在这里找到 slider http://jimmytenbrink.nl/slider/

看来 firefox 定位绝对+显示有问题:table-cell。

我的代码如下:

 <header>
        <div>
            <img src="./images/ironman.png"> 
            <span>Ironman</span>
        </div>
        <div>
            <img src="./images/ironman.png"> 
            <span>Ironman</span>
        </div>
        <div>
            <img src="./images/ironman.png"> 
            <span>Ironman</span>

        </div>
        <div>
            <img src="./images/ironman.png"> 
            <span>Ironman</span>
        </div>
        <div >
            <img src="./images/ironman.png"> 
            <span>Ironman</span>
        </div>
        <div>
            <img src="./images/ironman.png"> 
            <span>Ironman</span>

        </div>
        <div>
            <img src="./images/ironman.png"> 
            <span>Ironman</span>
        </div>
        <div>
            <img src="./images/ironman.png"> 
            <span>Ironman</span>
        </div>  
        </header>

还有CSS；

 header {
margin-top: 10px;
width: 1185px;
display: table;
overflow: hidden;
background-color: #000;
height: 500px;
 } 

header > div {
    background: url('./images/iron_man_bg.jpg');
    width: 123.8px;
    height: 500px;
    position: relative;
    -webkit-transition: width .3s;
    transition: width .3s;
    display: table-cell;
    border: 2px solid #fff;
    overflow: hidden;
}

header div:first-child {
    margin-left: 0px;
}

header div:last-child{
    margin-right: 0px;
}

    header div:hover span {
        left: 50px;
        opacity: 1;
    }   

header > div img {
    position: absolute;
    left: -240px;
    -webkit-transition: all .3s;
    transition: all .3s;
    -webkit-filter: grayscale(1);
    overflow:hidden;
}

header > div span {
    -webkit-transition: left .3s;
    transition: left .3s;
    position: absolute;
    bottom: 30px;
    color: white;
    left: -70px;
    opacity: 0;
    width: 151px;
    font-family: 'Fugaz One', cursive;
    text-transform: uppercase;
    color: #fff;
    font-size: 24px;
    text-shadow: 0px 0px 10px #f1f1f1;
    filter: dropshadow(color=#f1f1f1, offx=0, offy=0);
}

header > div:hover {
    width: 920px;
}

header div:hover img {
    left: 0px;
    -webkit-filter: grayscale(0);
}

Answer 1

这是有效的:

http://codepen.io/jeremyzahner/full/cAEbv

基本上，我在类.inside 的“div”中添加了一个新容器。在那上面我做 width:100%;高度:100；职位:相对；溢出:隐藏；。另外，我确实删除了外部 div 上的固定高度，因为标题已经保持了该固定高度，因此没有必要再次设置它。

这是 firefox 的一个已知“错误”，它处理 display:table-cell;像那样的div。我认为他们不会很快修好它。所以最好的解决方法(至少根据我的经验)是像这里这样的另一个内部包装器。

CSS 修改:

header > div .inside {

    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;

}
header > div {
    background: url('./images/iron_man_bg.jpg');
    width: 123.8px;
    position: relative;
    -webkit-transition: width .3s;
    transition: width .3s;
    display: table-cell;
    border: 2px solid #fff;
    overflow: hidden;
}

HTML 修改:

<div>
  <div class="inside">
    <img src="./images/ironman.png"> 
    <span>Ironman</span>
  </div>
</div>

这已在实际版本的 Chrome 和 Firefox(在 Ubuntu 上)中进行了测试。

希望对你有帮助