html - 设置html元素的高度不起作用

Question

为什么 html 元素有 max-height 属性，如果它们不遵循它。例如我有表:

<table  border="2" style="table-layout:fixed; max-height:20px;">
    <tr style="height:20px;">
        <td style="overflow:hidden; max-height:20px; overflow:hidden;">
            <img id="book" src="img/capture.png" alt="" style="position:relative; margin-top:0px;" />
        </td>
    </tr>
</table>

如果 img 的高度恰好大于 20px，则表格行的高度将不等于 20px。我如何告诉 html 我希望表格行的高度为 20px？

编辑:

我知道我可以更改 img 高度，但我不想扭曲 img。

Answer 1

这可能与 td 不是 display:block 而是 display:table-cell 的事实有关。我不认为 display table-cell 支持 max-height 。

您是否有理由不想在 <img> 标签上设置高度？

另见:Setting max-height for table cell contents