html - Firefox 中表格单元格内图像的宽度行为不端

Question

我有下表:

<table>
    <tbody>     
        <tr>
            <td colspan="2">
                <a href="#"><img src="http://www.sherv.net/cm/emoticons/cats/cat-headphones-smiley-emoticon.gif" /></a> 
                <a href="#"><img src="http://www.beaukit.com/catgrpbl.jpg" /></a>   
            </td>
        </tr>
    </tbody>
</table>

和以下 CSS:

table {
    width: 40%;
    background-color:grey;
    text-align: center;
    margin-bottom: 20px;
}
img {
    max-width: 100%;
    margin: 0 0 0.8em 0;
    max-height: 800px !important;
    width: auto !important;
    height: auto;
}

参见 Jsfiddle

我想要的是，如果单元格中的图片大于单元格本身，则单元格中的图片会填充其宽度。如果图片较小，则应保持其通过 max-width 表示的原始宽度。这似乎在 Chrome 中运行良好，但当我在 Firefox 中尝试时，较大的图片会拉伸(stretch)单元格的宽度。

同时，如果我将图像的宽度更改为:width: 100% !important;，较小的图片将被拉伸(stretch)以填充单元格(请参见表 2)。

我该如何解决这个问题？

Answer 1

尝试添加

table {
 table-layout:fixed;
}

表格单元格的行为不像 block 元素，它们的宽度和高度由其中的内容定义。来自 I.E. documentation :

自动:默认。列宽由列单元格中最宽的牢不可破的内容设置。

fixed:表格和列的宽度由 col 对象的宽度之和设置，或者，如果未指定，则由第一行单元格的宽度设置。如果没有为表格指定宽度，则默认以 width=100% 呈现。