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都很陌生。我想保留这张桌子，因为它给了我一个很好的布局，但我对所有能解决我问题的事情持开放态度。

有人可以帮助我吗？

Answer 1

显然height="auto"在不同浏览器中的实现方式不同。可以依靠的东西。

如果删除它，图像可能超出了它们的空间。

尝试省略height属性，然后添加到css：

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

IE 8-10表中的图像太大了

1 个答案: