Css Firefox vs Chrome:背景覆盖的大小与display:table单元格的大小不正确

我有一个HTML/CSS块，在Firefox（22.0）和Chrome（28.0.1500.71）中表现不同。我在想原因。我创建了一个JSFIDLE，这样可以很容易地观察结果输出

下面的源代码试图将一个简单的背景色覆盖在一个表格单元格上，该单元格中嵌套了一组div元素，并使用

display:table

。只有标有playbtn类的表格单元格才应具有覆盖

在确定框模型尺寸时，

表格单元格

CSS似乎对Firefox有问题。出于某种原因，

top/bottom/left/right

CSS属性错误地使用了最外层的块

tbl

class'

。这似乎不是Chrome、Safari和IE9+的问题

当我将CSS显示值从

表格单元格

更改为

内联块

时，我相信我得到了我想要的行为，但我没有进一步追求它；我需要

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>

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

CSS 2.1规范“规定：

“位置：相对”对表格行组、表格页眉组、表格页脚组、表格行、表格列组、表格列、表格单元格和表格标题元素的影响未定义

因此，即使所有其他浏览器都按照“预期”使用值

relative

，Firefox忽略它也没有错

编辑

我认为用

位置将内容包装成另一个
：相对将是最简单的解决方案：

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>

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

演示

+1格式良好，易于测试等。请查看更多详细信息和可能的解决方案。嗯，似乎与此问题类似-希望不要重复@kalley-我从你建议的链接中得到了明确的线索。用
div
将单元格内容包装成
位置：relative
让我感觉非常接近。是的，我猜我有预感，上面的链接显示的是灰色区域。我正在寻找一个实用的解决方案，如果有的话，不管规格如何。谢谢你的快速回复，以确认我对确切规格的怀疑。@treejanitor我已经用一个解决方案更新了我的答案，就像kalley在评论中链接的答案一样。太好了！我只是得到了同样的答案，用你的线高度作为我最后的调整。我对原作的修改就在这里。我会把这个答案标对。结果很好。我很高兴我能在这里投入我的两分钱，这最终起了作用。：）我有一个奇怪的渲染问题，像铬一样的颜色没有更新。。。通过删除td上的
位置：relative
，它修复了那些意外的行为