css - Firefox と Chrome: display:table-cell で背景オーバーレイのサイズが正しくない

Question

Firefox (22.0) と Chrome (28.0.1500.71) で動作が異なる HTML/CSS のブロックがあります。私はその理由を理解しようとしています。結果の出力を簡単に確認できるように、jsfiddle を作成しました。 http://jsfiddle.net/treejanitor/Q8zn4/3/

以下のソースは、div の下にネストされた一連の div 要素を使用して、テーブル セルに単純な背景色をオーバーレイしようとしていますdisplay: table。playbtn クラスでマークされたテーブル セルのみがオーバーレイを持つ必要があります。

table-cellボックス モデルの寸法を決定する際に、 CSS が Firefox に問題があるようです。何らかの理由で、top/bottom/left/rightCSS 属性が最も外側のブロックであるtblクラスの<div>. これは、Chrome、Safari、IE9+ では問題ないようです。

CSS の表示値を から に変更したときtable-cell、inline-block期待どおりの動作が得られたと思いますが、それ以上追求しませんでした。display: table-cell均等に分散された表セル間の間隔を含む、より複雑な表表示を適切に管理するには、 が必要です。

誰にもアイデアはありますか？

HTML

<div class="tbl">
    <div>
        <div>
            <img src="http://placekitten.com/200/240" />
            <div class="playbtn"></div>
        </div>
        <div>Description</div>
    </div>
    <div>
        <div>
            <img src="http://placekitten.com/200/240" />
            <div class="playbtn"></div>
        </div>
        <div>Description</div>
    </div>
</div>

CSS

.tbl {
    display: table;
}
.tbl > div {
    display: table-row;
}
.tbl > div > div {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    padding: 5px;
}
div.playbtn {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: blue;
    background-size: 100%;
    opacity: 0.3;
}