Question

我对我以前的帖子有疑问： Animation stop with css3

滑块适用于Chrome。但是在firefox中它无法正常工作。这里有人有想法吗？

找到滑块

看起来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

基本上，我在＆＃34; div＆＃34;中添加了一个新容器。与班级.inside。在那我做width:100%; height:100; position:relative; overflow:hidden;。另外，我确实删除了外部div上的固定高度，因为标题已经保持固定高度，因此无需再次设置它。

这是一个知识错误＆＃34;它对待显示的firefox：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上）进行了测试。

希望这有帮助

Firefox无法正确显示标题

1 个答案: