Firefox和IE11 - 表内的图像不遵循td宽度

Question

我有一个表格，其中包含一个列中的图像：

在Firefox和IE中，图像始终与原始尺寸一样大，使td扩展超出指定的width。

这是Codepen。

在创建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浏览器的问题。

<强> DEMO