html/css：顯示錶格單元格不在火狐中居中文本

Question

將鼠標懸停在另一個div上，並在不透明度和一些完全居中div內的文本上淡出。這在所有瀏覽器中都可以正常工作，除了firefox外。
這裏有一個的jsfiddle演示：http://jsfiddle.net/neal_fletcher/WHCNF/

HTML：

<div class="grid-block identity" style="background-image: url('http://placekitten.com/380/250');"> 
    <div class="grid-block-text-hover-wrap"> 
    <div class="grid-block-text-wrap"> 
     <div class="grid-block-text-title">TITLE</div> 
     <div class="grid-block-text-subtitle">SUBTITLE</div> 
    </div> 
    </div> 
</div> 

CSS：

.grid-block { 
    position: absolute; 
    width: 380px; height: 250px; 
    margin-left: 25px; margin-right: 25px; 
    margin-bottom: 50px; 
    font-family: 'times'; 
    text-align: center; 
    background: no-repeat 50% 50%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    cursor: pointer; 
    display: table; vertical-align: middle; 
} 

.grid-block-text-hover-wrap { 
    position: absolute; 
    width: 100%; height: 100%; 
    background: rgba(0,0,0,0.75); 
    display: table; 
    vertical-align: middle; 
} 

.grid-block-text-hover-wrap .grid-block-text-wrap { 
    color: white; 
} 

.grid-block .grid-block-text-wrap { 
    display: table-cell; vertical-align: middle; 
    width: 100%; height: 100%; 
} 

.grid-block-text-wrap { 
    margin-left: 50px; margin-right: 50px; 
} 

.grid-block-text-title { 
    position: relative; 
    margin-top: 7px; 
    margin-bottom: 20px; 
    text-transform: uppercase; 
} 

.grid-block-text-hover-wrap .grid-block-text-title { 
    font-size: 16px; 
    line-height: 25px; 
    letter-spacing: 2px !important; 
} 

.grid-block-text-subtitle { 
    position: relative; 
    font-size: 12px; 
    letter-spacing: 2px !important; 
    text-transform: uppercase; 
} 

正如你可以看到.grid-block-text-hover-wrap消失在盤旋，但由於某些原因，在Firefox這個div ISN不能正確顯示，也不能將文本居中。我無法弄清楚爲什麼這似乎正在發生。任何建議將不勝感激！

Answer 1

嘗試用width: 380px; height: 250px替換height: 100%; width: 100%。看看新的小提琴：http://jsfiddle.net/WHCNF/1/

Answer 2

改變你目前的類

.grid-block-text-hover-wrap { 
position: relative; 
width: 100%; height: 100%; 
background: rgba(0,0,0,0.75); 
display: table; 
vertical-align: middle; } 

我希望它在Firefox爲你的作品也。