表格在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不同的版本

回答

相關問題