火狐沒有顯示正確頭

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）的實際版本進行了測試。

希望這會有幫助