image - 表中的 Bootstrap 响应图像在 IE11 中失败

Question

我有一个包含图像的表格单元格，该图像应占单元格宽度的 50%。

该代码适用于 Chrome、Firefox 和 Edge，但在 IE11 中，大图像不会占用单元格宽度的 50%，而只会占用其原始大小的 50%。

这是一个使用 800 像素宽图像的 fiddle 。工作正常，除了在 IE11 中，图像显示为 400px 宽而不是响应式: https://jsfiddle.net/43Tesseracts/9knqerj7/4/

这是带有 Bootstrap 的相关 html:

    <td>
          <img src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/12/Images-2.jpg"
             style="max-width:50%;"
             >
          The image beside me should appear 50% of the cell, not 50% of it's native size.  WOorks in Chrome, FF, Edge, but NOT IE 11
    </td>

SE上好像有很多类似的issues，但是都比较老了，或者用的是老版本的Bootstrap。我正在使用 Bootstrap 3.3.7

Answer 1

不需要额外的 div。您可以在表格元素上设置以下 css 属性:

table{
    table-layout: fixed;
}

我用一个工作示例更新了你的 fiddle :

https://jsfiddle.net/9knqerj7/10/

(此外，我将 img 更改为 block 元素并向左浮动，但这不是响应能力所必需的 - 恕我直言，看起来更好)