html - 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>