3

I have a block of HTML/CSS that behaves differently in Firefox (22.0) and Chrome (28.0.1500.71). I'm trying to figure out why. I have created a jsfiddle so that the resulting output can be easily observed. http://jsfiddle.net/treejanitor/Q8zn4/3/

The source below is attempting to overlay a simple background color upon a table cell with a set of div elements nested under a div with display: table. Only the table cell which is marked with the playbtn class should have the overlay.

It appears that the table-cell CSS is problematic to Firefox when determining box model dimensions. For some reason, the top/bottom/left/right CSS attributes are incorrectly using the outermost block, the tbl class' <div>. This doesn't seem to be an issue with Chrome, Safari, IE9+.

When I changed the CSS display value from table-cell to inline-block, I believe I got the behavior I desired but I did not pursue it much further; I need the display: table-cell in order to properly managed a more complex table display including spacing between the table cells evenly distributed.

Anyone have any ideas?

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;
}
4

1 回答 1

3

CSS 2.1 规范“ 9.3.1 选择定位方案：‘位置’属性”说：

'position:relative' 对 table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell 和 table-caption 元素的影响未定义。

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

编辑

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

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;
}

演示

先试后买

于 2013-07-24T18:38:57.513 回答