Firefox将文本叠加层放置在无法在Firefox中正常工作的错误位置（适用于IE，Chrome和Safari）

Question

我正在尝试制作一个相册： http : //lovingearthphotography.com/cal.html我正在修改一个我在网上找到的示例，该示例使用表格查看缩略图。 我想在缩略图上加上一些文字（拍摄照片的当月日期）。 虽然这对于大多数浏览器都可以正常工作，但文本在Firefox中的显示位置不正确。 如果您转到上面的链接，您将在表格的左上方看到数字9，而不是在每个单元格的左上方看到文本）。

该表是用JS生成的：

getCurrentThumbTable: function(){
    var thumbTable = new Element("table");
    var thumbTableBody = new Element("TBODY");

    thumbTable.setProperty('id', 'imagoCurrentThumbTable');
    var counter = this.lastThumbImageIndex;
    for (i = 0; i < this.thumbnailRows; i++) {
        var tr = new Element("tr");
        for (j = 0; j < this.thumbnailColumns; j++) {
            var td = new Element("td");
            td.style.position = "relative";
            if (this.getThumbImage(counter) != null) {
                td.appendChild(this.getThumbImage(counter));
                //var text = new Element("div");
                //text.addClass( "thumbOverlay" );
                var text = document.createElement('div');
                text.style.position = "absolute";
                text.style.fontSize = "24px";
                text.style.left = "5px";
                text.style.top = "5px";
                text.style.color = "#f5f5f5";
                text.style.backgroundColor = "rgba(69,69,69,0.8)";

                text.innerHTML = this.images[counter].getImageDay();

                td.appendChild(text);
                counter++;
                this.lastThumbsOnCurrentPage++;
                if (this.images.length > this.thumbsPerPage) {
                    ElementHelper.show('imagoMenuNextLink');
                }
            }
            else {
                ElementHelper.hide('imagoMenuNextLink');
            }
            tr.appendChild(td);
        }
        thumbTableBody.appendChild(tr);
    }
    thumbTable.appendChild(thumbTableBody);
    this.lastThumbImageIndex = counter;
    return thumbTable;
},

在运行时产生：

<table id="imagoCurrentThumbTable">
    <tbody>
        <tr>
            <td style="position: relative;">
                <img src="Pics/thu/001.jpg" class="imago_thumbImg imago_selectedThumb" alt="Running" id="id_001.jpg">
                <div style="position: absolute; font-size: 24px; left: 5px; top: 5px; color: rgb(245, 245, 245); background-color: rgba(69, 69, 69, 0.8);">1</div>
            </td>
            ….
            <td style="position: relative;">
                <img src="Pics/thu/002.jpg" class="imago_thumbImg" alt="abcd" id="id_002.jpg">
                <div style="position: absolute; font-size: 24px; left: 5px; top: 5px; color: rgb(245, 245, 245); background-color: rgba(69, 69, 69, 0.8);">2</div>
            </td>
        </tr>
    </tbody>
</table>

有谁知道为什么这在FF中不起作用？

谢谢

KK

Answer 1

前几天有一个非常类似的问题。

从我使用过很多的网站上用Google搜索找到了一个表格单元中的绝对位置元素 。

您需要在表单元格position：relative内放置一个容器div，以便绝对位置项目可以与其对齐。

希望能有所帮助