1

私はフォト ギャラリーを作成しようとしています: http://lovingearthphotography.com/cal.html Web で見つけたテーブルを使用してサムネイルを表示する例を変更しています。サムネイルにテキスト (写真が撮影された日付) を重ねたいと思いました。これはほとんどのブラウザーで問題なく機能しますが、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で機能しない理由を誰かが知っていますか?

ありがとう

株式会社

4

1 に答える 1