Firefox vs Chrome:背景覆盖的大小与display:table单元格不一致

Question

我有一个HTML/CSS块，它在Firefox（22.0）和Chrome（28.0.1500.71）中的表现不同。我正在努力找出原因。我创建了一个jsfiddle，这样就可以很容易地观察到结果输出。http://jsfiddle.net/treejanitor/Q8zn4/3/

下面的源代码试图在一个表单元格上覆盖一个简单的背景色，其中一组div元素嵌套在具有display: table的div下。只有用playbtn类标记的表单元格才应该具有覆盖。

在确定长方体模型尺寸时，table-cellCSS似乎对Firefox有问题。由于某些原因，top/bottom/left/right CSS属性错误地使用了最外层的块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;
}

Answer 1

CSS 2.1规范"9.3.1选择定位方案：‘position’属性"表示：

"position:relative"对表行组、表头组、表页脚组、表行、表列组、表列、表单元格和表标题元素的影响未定义。

因此，即使所有其他浏览器都使用值relative作为"预期"，Firefox忽略它也没有错

编辑

我认为用position: relative;将内容包装到另一个<div>中是最简单的解决方案：

HTML

<div class="cell">
    <div class="relative">
        <img src="http://placekitten.com/200/240" />
        <div class="overlay"></div>
    </div>
</div>

CSS

div.cell {
    display: table-cell;
}
div.relative {
    position: relative;
    line-height: 0;
}
div.overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid red;
}

演示

购买前试用