表中的引导响应图像在 IE11 中失败答案

【问题标题】：Bootstrap responsive image in table fails in IE11表中的引导响应图像在 IE11 中失败
【发布时间】：2017-05-18 08:50:39
【问题描述】：

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

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

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

这是带有引导程序的相关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 上似乎有很多类似的问题，但它们都比较老，或者使用的是旧版本的 Bootstrap。我正在使用 Bootstrap 3.3.7

【问题讨论】：

你试过 Bass Jobsen answer 吗？也尝试设置max-width:100%
是的，是的。我能够在小提琴中重现。 jsfiddle.net/43Tesseracts/jtL6qujL/1
我解决了你的问题吗？

标签： image css twitter-bootstrap-3 responsive-design internet-explorer-11

【解决方案1】：

你可以像我在这里做的那样使用 div 来解决这个问题：

<td>
    <div style="display: flex;">
        <div style="width: 50%">
            <img src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/12/Images-2.jpg" style="width: 100%">
        </div>
        <div style="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
        </div>
    </div>
</td>

工作解决方案：https://jsfiddle.net/9knqerj7/8/

【讨论】：

【解决方案2】：

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

table{
    table-layout: fixed;
}

我用一个工作示例更新了你的小提琴：

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

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

【讨论】：