Firefox位置文本覆盖错误的地方不工作在Firefox中（罚款IE浏览器，Chrome浏览器和Safari浏览器）

我正在试图做一个照片库：http://lovingearthphotography.com/cal.html 我正在修改我在网上找到一个使用表来查看缩略图。我想用一些文字（照片拍摄月份的一天），以覆盖缩略图。虽然这对于大多数浏览器工作正常，没有被显示在Firefox中的正确位置的文本。如果你去上面的链接，你会在每个单元格的左上角看到九位数字表的左上角，而不是文本）。Firefox位置文本覆盖错误的地方不工作在Firefox中（罚款IE浏览器，Chrome浏览器和Safari浏览器）

表是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工作？

感谢

来源

2012-12-20 iakiak

有一个非常类似的问题只是一天。

从一个网站，我已经使用了很多谷歌搜索发现这个absolutely-position-element-within-a-table-cell。

你需要把一个div容器的表格单元格位置中：相对，这样的绝对位置的项目可对准它。

希望有帮助

来源

2012-12-20 21:15:29 Dampsquid

谢谢！这个解决方案很好。 – iakiak

Firefox位置文本覆盖错误的地方不工作在Firefox中（罚款IE浏览器，Chrome浏览器和Safari浏览器）

回答

相关问题