表格细胞打破布局内的图像。 +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

这可能是因为image元素是内联元素。它在文本行上显示为块，默认对齐方式是它放在文本行的基线上。由于基线下方有一个排水沟（有空格可以悬挂像g和j这样的字符），图像底部和文本块底部之间会有一些距离。

尝试将图像作为块元素并查看它是否修复了空间：

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

（当然，样式会在你的样式表中找到它。）