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

【问题标题】：Table Renders differently in Firefox than Chrome or OperaFirefox 中的表格呈现方式与 Chrome 或 Opera 不同
【发布时间】：2023-04-02 05:41:01
【问题描述】：

我正在开发一个新的 Tumblr 主题，但我在处理音频帖子时遇到了问题。我将信息放入表格中，但表格在 Firefox 与其他浏览器中的呈现方式截然不同。我这里有代码：

http://jsbin.com/iseqab/1

我希望元数据信息在专辑封面旁边居中，或者在其旁边均匀分布。只是看起来不错的东西。 chrome 使最后一个框（播放）占据了其余的空间。 firefox 为每个表格行提供均匀的顶部和底部空间。如何在浏览器之间获得一致的外观？

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

【问题讨论】：

在我的电脑上，Opera 将前 3 行并排放置，而其他浏览器（Gecko、Chrome、IE）将所有 4 行均匀地间隔开。
因为iframe和descriptions在同一个表中不同的列，所以descriptions需要根据iframe的高度调整高度。您可以在第一行的第二列中制作另一个表格并将描述放入该表格中，之后描述的高度将是正常高度。我希望你明白我的意思。
感谢 Nitesh 的提示！那解决了它。我这里有修改后的代码：jsbin.com/iseqab/9

标签： html css html-table cross-browser tumblr

【解决方案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>

【讨论】：