Question

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

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

这是一个使用800px宽图像的小提琴。除了在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

Answer 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/

Answer 2

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

table{
    table-layout: fixed;
}

我用一个有效的例子更新了你的小提琴：

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

（另外，我将img更改为块元素并向左浮动，但响应性不需要 - 只是看起来更好恕我直言）

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

2 个答案: