圖片內部表格細胞破碎布局。 +3像素

Question

我的HTML看起來像這樣的簡化：

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

截圖錯位：

圖像佈局的屏幕截圖：

細胞的屏幕截圖包含圖像佈局：

Answer 1

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

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

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