Firefox 将文本覆盖放置在错误的位置，在 Firefox 中不起作用（适用于 IE、Chrome 和 safari）答案

【问题标题】：Firefox positions text overlay in wrong place not working in firefox (fine with IE, Chrome and safari)Firefox 将文本覆盖放置在错误的位置，在 Firefox 中不起作用（适用于 IE、Chrome 和 safari）
【发布时间】：2012-12-20 21:04:57
【问题描述】：

我正在尝试制作照片库：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 中不起作用？

谢谢

【问题讨论】：

标签： javascript css firefox

【解决方案1】：

前几天遇到了一个非常相似的问题。

在我经常使用的网站上通过谷歌搜索找到了这个absolutely-position-element-within-a-table-cell。

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

希望有帮助

【讨论】：