1

我正在尝试制作一个照片库： 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

4

1 回答 1

1

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

在我经常使用的网站上通过谷歌搜索找到了这个绝对位置元素在表格单元内。

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

希望有帮助

于 2012-12-20T21:15:29.333 回答