火狐没有显示正确头

Question

我有一个关于我以前的帖子一个问题： Animation stop with css3

滑块可以完美运行在Chrome中。在Firefox中，但它不能正常工作。这里有人有想法吗？

滑块可以在这里http://jimmytenbrink.nl/slider/

发现它看起来像有在Firefox有问题，定位绝对+显示：表单元格。

我的代码如下：

<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内。在那我做width:100%; height:100; position:relative; overflow:hidden;。另外，我确实删除了外部div上的固定高度，因为头部已经拥有固定的高度，所以不需要重新设置。

它是一个知名的firefox的“bug”，它对待显示器：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）的实际版本进行了测试。

希望这会有帮助