Chrome和Safari沒有渲染我的桌子，以適應其內容

Question

我在這個網頁上有一個元素我正在開發我需要我的文字以符合它上面的圖像的寬度 - 其寬度將永遠不同 - 想想字幕。我發現使用1px表來強制這個寬度尺寸行爲的許多參考。我遇到了問題，儘管Safari和Chrome瀏覽器「看到」了這條指令 - 文本最終成爲一個稍微大小的文本框，位於圖像後面。

正如我所看到的，問題與坐在div中的文本和圖像嵌套在表格中有關。我需要圖像坐在div中，因爲我使用的一些jQuery腳本叫做循環，它將一組圖像變成幻燈片。這個問題也可能與腳本有關。無論如何，我已經嘗試了所有div上的左浮動和左浮動的看似無限數量的組合，改變它們的位置和寬度......沒有任何效果。任何人都有關於如何提出這個問題的線索？

編輯1：好的，我應該編輯我的文章還是回答答案？

下面就來看看我有問題的URL - http://friedmanstudios.ca/webdev/test8.html

，代碼：

<div id="content" class="boxes"> 
<table> 
    <tr> 
    <td > 
    <div id="imageFrame"> <a href="#" class="img" title="_MG_9786_fmt.jpeg"> <img src="images/_MG_9786_fmt.jpeg"/> </a> <a href="#" class="img" title="IMG_5169_fmt.jpeg"> <img src="indesign export/GFA-TEARSHEETS-100526-01-web-images/IMG_5169_fmt.jpeg"/> </a> <a href="#" class="img" title="IMG_5175_fmt.jpeg"> <img src="indesign export/GFA-TEARSHEETS-100526-01-web-images/IMG_5175_fmt.jpeg"/> </a> <a href="#" class="img" title="aerial_fmt.jpeg" width=""> <img src="indesign export/GFA-TEARSHEETS-100526-01-web-images/aerial_fmt.jpeg"/> </a> </div> 

     <div id="cycleCtrl"> 
     <div id="prev" class="pager"><a href="#">< Prev</a> </div> 
     <div id="next" class="pager"><a href="#">Next ></a></div> 
     <div id="pagerNav" class="pager"></div> 
     </div> 

     <div id="descController"> 

     <img src="images/arrow.gif" name="arrow" width="5" height="10" id="arrow" /> <span id="projectName">Toronto Centre for the Arts </span> <br /> 
     <div id="desc"> In the past eight years... 
     </div> 
     </div></td> 
    <td width="90%"><!--push col 1 back--></td> 
    </tr> 
</table> 

和樣式：

#content { 
    position: absolute; 
    top: 250px; 
    left: 275px; 
    float: left; 
    clear: both; 
} 
#content table { 
    float: left; 
    width: 1px; 
} 
#imageFrame { 
    position: relative; 
    float: left; 
    clear: left; 
    width: inherit; 
} 

#desc { 
    position: relative; 
    clear: left; 
    float: left; 
} 
#descController { 
    position:relative; 
    padding-top:5px; 
    padding-bottom:10px; 
    clear: left; 
    float: left; 
} 
#descController div { 
height:0; 
overflow:hidden; 
-webkit-transition:all .5s ease; 
-moz-transition:all .5s ease; 
-o-transition:all .5s ease; 
transition:all .5s ease; 
    padding-top:10px; 
    margin-top: 10px; 
    word-spacing: 0em; 
    line-height: 16px; 
    font-size: 12px; 
    position: relative; 
    float: left; 
    clear: left; 
} 

Answer 1

我有固定它明確的圖像尺寸。