Firefox中的表格呈现方式与Chrome或Opera不同

Question

我正在研究一个新的Tumblr主题，但是我在音频帖子方面遇到了麻烦。 我将信息放入表中，但是该表在Firefox和其他浏览器中的呈现方式却大不相同。 我在这里有代码：

http://jsbin.com/iseqab/1

我希望元数据信息要么位于专辑封面旁边居中，要么均匀分布在专辑封面旁边。 看起来不错的东西。 chrome使最后一个盒子（播放）占据了其余空间。 firefox给每个表行在顶部和底部均匀的空间。 如何在浏览器之间保持一致的外观？

这是一张图片，显示我的意思：

Answer 1

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>