html - IE 8-10 表格中的图片太大

Question

我有一个小问题，我无法解决。

请看一下我的 html 和我的 css。为什么图片在 safari、firefox、chrome 中可以完美响应，但在 IE 8 到 10 中却不行？

html:

<table class="my-table">
  <tbody>
    <tr>
      <td height="130"><a href="http://www.kc-werbeartikel.com" target="_blank"><img              style="display: block; margin-left: auto; margin-right: auto;"     src="/images/sponsoren/kuratli.gif" alt="Kuratli Collection" width="100%" height="auto" /></a> </td>
      <td height="130"><a href="http://www.migros.ch" target="_blank"><img style="display: block; margin-left: auto; margin-right: auto;" src="/images/sponsoren/Logo_Migros.JPG" alt="Migros" width="100%" height="auto" /></a>  </td>
      <td height="130"><a href="http://www.gartenbau-weber.ch" target="_blank"><img style="display: block; margin-left: auto; margin-right: auto;" src="/images/sponsoren/Logo_Webergartenbau.gif" alt="Webergartenbau" width="100%" height="auto" /></a>  </td>
    </tr>
  </tbody>
</table>

CSS:

table.my-table td {
  width: 33% !important;
  border: 1px solid #dddddd !important;
}

table.my-table {
  width: 100% !important;
  table-layout: fixed !important; 
  border-spacing: 0.5rem !important;
  border-collapse: separate !important;
}

我对html 和css 都很陌生。我想保留这张 table ，因为它给我一个很好的布局，但我对解决我问题的一切持开放态度。

有人可以帮助我吗？

Answer 1

显然 height="auto" 在不同的浏览器中实现不同。不能依赖的东西。

但是，如果您删除它，图像可能会超出它们的空间。

尝试省略 height 属性，并添加到 css:

table.my-table td img{
   max-height: 100%;
}