表格在Firefox中呈现与Chrome或Opera不同的版本

我正在研究新的Tumblr主题，并且遇到了音频帖子的问题。我把这些信息放在一个表格中，但是在Firefox和其他浏览器中，这个表格的表现是非常不同的。我这里的代码：表格在Firefox中呈现与Chrome或Opera不同的版本

http://jsbin.com/iseqab/1

我想元数据信息以任一居中紧邻专辑封面，或均匀地在它旁边隔开。只是一些看起来不错的东西。铬使最后一个盒子（戏剧）占据了空间的其余部分。 Firefox给每个表格行甚至空间的顶部和底部。如何在浏览器之间获得一致的外观？

这里是一个图像显示我的意思：

来源

2013-07-03 Dolores

在我的电脑，歌剧院把最高级的3线并拢，而其他浏览器（壁虎，Chrome浏览器，IE）空间中的所有4行均匀。 –

作为iframe，并且说明与不同列在同一个表中，因此说明需要根据iframe的高度调整它们的高度。你可以在第一行的第二列制作另一个表格，并在该表格中放置描述，之后描述的高度将是正常的高度。我希望你明白我的意思。 –

感谢您的提示Nitesh！这解决了它。我在这里修改了代码：http://jsbin.com/iseqab/9/ – Dolores

Use nested table in staid of rowspan as below. 

<table cellpadding="0" cellspacing="0"> 
    <tbody> 
    <tr> 
     <td><table cellpadding="0" cellspacing="0"> 
      <tr> 
      <td><div class="glass" style="height:212px"> <img class="album" alt="album" src="Album%20Art%20Tumblr_files/tumblr_mp65f3F1nG1sxmxz6o1_1372533231_cover.jpg"> </div> 
       <div id="audioplayer"> <span id="audio_player_54198232780"> 
       <div class="audio_player"> 
        <iframe class="tumblr_audio_player tumblr_audio_player_54198232780" src="Album%20Art%20Tumblr_files/tumblr_mp65f3F1nG1sxmxz6.htm" allowtransparency="true" style="-webkit-transform: translate3d(0px, 0px, 0px);" frameborder="0" height="27" scrolling="no" width="207"> </iframe> 
       </div> 
       </span> </div></td> 
      </tr> 
     </table></td> 
     <td align="left"><table cellpadding="0" cellspacing="0"> 
      <tr> 
      <td><table cellpadding="0" cellspacing="0"> 
       <tbody> 
        <tr> 
        <th>Artist:</th> 
        <td>Julandrew</td> 
        </tr> 
        <tr> 
        <th>Album:</th> 
        <td>Songs To Dream By</td> 
        </tr> 
        <tr> 
        <th>Song:</th> 
        <td>Wait-a-little-longer</td> 
        </tr> 
        <tr> 
        <th>Plays:</th> 
        <td>4</td> 
        </tr> 
       </tbody> 
       </table></td> 
      </tr> 
     </table></td> 
    </tr> 
    </tbody> 
</table>

来源

2013-08-12 11:00:56 Ajoshi

表格在Firefox中呈现与Chrome或Opera不同的版本

回答

相关问题