2011-06-16 85 views
6

我的HTML看起來像這樣的簡化:圖片內部表格細胞破碎布局。 +3像素

<tr> 
     <td width="500px"> 
      <ul class="menu_up"> 
       <li><a href="/">Home</a></li> 
       <li><a href="/about">About</a></li> 
       <li><a href="/services/services-list">Services</a></li> 
       <li><a href="/links">Links</a></li> 
       <li><a href="/contact">Contact</a></li> 
      </ul> 
     </td> 
     <td width="375"> 
      <img src="/images/11_03.gif" alt="" height="39"/> 
     </td> 
     </tr> 

網站網址: jdemkovitchcpa.com

與圖像兼容模式表格單元格擴展行42個像素從而打破布局(應該是39高)

我檢查了開發人員工具,看不出有什麼問題。圖像確實是39.表格行42.具有UL的表格單元也是39,但有2個偏移量。

如果我從細胞中移除圖像變得39.如果刪除UL它停留42.

截圖錯位: enter image description here

圖像佈局的屏幕截圖: enter image description here

細胞的屏幕截圖包含圖像佈局: enter image description here

回答

5

這可能是因爲圖像元素是一個內聯元素。它在文本行中顯示爲塊,默認對齊方式是將其放置在文本行的基線上。由於底線下方有一個排水溝(有空間可以懸掛像g和j這樣的字符),因此圖像底部和文本塊底部之間有一定距離。

儘量讓圖像塊元素,看看它是否修復的空間:(風格當然會再進去你的樣式表,如果它的工作原理)

<img src="/images/11_03.gif" alt="" height="39" style="display:block;"/> 

+0

萬元的感謝!我花了3-4個小時試圖看看是什麼原因造成的! – katit 2011-06-16 13:34:36