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中尝试时，较大的图片会拉伸单元格的宽度。

然而，如果我将图像的宽度更改为：width: 100% !important;，则会拉伸较小的图片以填充单元格（请参阅table.two）。

我该如何解决这个问题？

Answer 1

尝试添加

table {
 table-layout:fixed;
}

表格单元格的行为与块元素不同，它们的宽度和高度由它们内部的内容定义。来自I.E. documentation：

auto：默认。列宽由列单元格中最宽的不可破坏内容设置。

已修复：表格和列宽度由col对象上的宽度总和设置，如果未指定，则由第一行单元格的宽度设置。如果没有为表指定宽度，则默认情况下呈现宽度= 100％。

Answer 2

你有使用width auti！important，你不应该这样做

 table tr, table tr td{
     width:100%
 }
 table tr td a{
   width:100%;
   display:block;
 }
 img {
     width: 100%;
  }

Check on Fiddle

firefox行为不端的表格单元格内的图像宽度

2 个答案: