在I.E中工作的HTML代码，但不是Firefox

Question

<tr>
<td style="width:33.33333%;background:url(images/box1.png) top left no-repeat; background-size:100%; height:155px;position:relative">
         <!----><img src="images/pic1.png" style="position:absolute; z-index:12; left:227px; top:20px"/>
          <div style="position:absolute; vertical-align:top; z-index:11; left:12px; top:20px">
           <font size="+2" color="#FFFFFF">sometext<br/>
    sometext
           </font>
                <br/><br style="line-height:40px"/>
            <a href="page1.html"style=" font-size: small;color:#FFFFFF;" >
                somemoretext
            </a> 
          </div> 

</td>
<td style="width:33.33333%; background:url(images/box2.png) left top no-repeat; background-size:100%;position:relative">
<img src="images/pic2.png" height="122" width="76" style="position:absolute; z-index:12; left:227px; top:20px"/>
          <div style="position:absolute; vertical-align:top; z-index:11; left:12px; top:20px">
           <font size="+2" color="#FFFFFF">sometext<br/>
    sometext</font><br/><br style="line-height:40px"/>
    <a href="page2.html"style=" font-size: small;color:#FFFFFF;" >
      somemoretext</a> 
        </div> 
    </td>
<td style="width:33.33333%; background:url(images/box3.png) left top no-repeat; background-size:100%; position:relative">
<img src="images/pic3.png" height="122" width="76" style="position:absolute; z-index:12; left:227px; top:20px"/>
          <div style="position:absolute; vertical-align:top; z-index:11; left:12px; top:20px">
           <font size="+2" color="#FFFFFF">sometext<br/> sometext
           </font>
                <br/><br style="line-height:40px"/>
            <a href="page3.html"style=" font-size: small;color:#FFFFFF;" >
                somemoretext
            </a> 
          </div>

我使用这些代码将底部周围的3张图片（彩色框）与一些文字，一张小图片和一个顶部的链接对齐。当我在Internet Explorer中打开它时，这完全正常。但是当我在Firefox中打开它时，彩色框仍然出现在正确的位置，而文本，小图片和链接似乎出现在左上角（就在我的网页横幅下方）。

我可以知道我的HTML代码有什么问题吗？