Firefox和IE11-表格內的圖片未遵循td寬度

Question

我有一個表在其列之一中包含圖像：

在Firefox和IE中，圖片始終與原始大小一樣大，從而使td擴展到其指定的width 。

這是Codepen 。

在創建代碼筆時，我意識到Chrome確實存在相同的問題，但已通過normalize.css的這一部分進行了修復：

img, object, embed {
  max-width: 100%;
}

我發現的一些解決方案是添加table-layout: fixed在table 。 但這只能解決我的表沒有checkbox 。 否則它的行為很奇怪（您可以在Codepen上嘗試一下）。

還有其他解決方案嗎？

Answer 1

一個簡單的解決方法是將圖像寬度定位如下所示，而不是td標簽的寬度定位：

CSS：

img {
  border: 0;
  display: inline-block;
  vertical-align: middle;
  width: 95%;
  height: auto;
}

在下面的演示中對此進行了演示，它應該可以解決IE和FF瀏覽器的問題。

演示