当行中包含大图像时，如何使 IE 11 尊重表中的列宽？

Question

以下内容在 Chrome（最新）中运行良好，但奇怪的是在过时的 IE 版本中 - 但在最新的 IE 版本 (11) 中，它的行为似乎不像我想要的那样。

在 Chrome（最新）和过时的 IE 版本中，第 1 列不会更改其宽度以适应第 2 列中的大图像，但在最新的 IE 版本 (11) 中会更改 - 如何更正此问题？

<table>
 <tr>
  <td class="header">
     Column 1
  </td>
  <td class="header">
     Column 2
  </td>
 </tr>
 <tr>
   <td class="body_twenty">
     <table>
        <tr>
           <td>
              Test...
           </td>
        </tr>
     </table>
  </td>
  <td class="body_eighty">
     <table>
        <tr>
           <td>
              Test...
           </td>
           <td>
              Test...
           </td>
        </tr>
     </table>
  </td>
  </tr>
  <tr>
  <td class="body_twenty">
     <table>
        <tr>
           <td>
              Test...
           </td>
        </tr>
        <tr>
           <td>
           </td>
        </tr>
        <tr>
           <td>
           </td>
        </tr>
     </table>
  </td>
  <td class="body_eighty">
     Test...
     <img src="http://www.psdgraphics.com/file/colorful-triangles-background.jpg">
  </td>
 </tr>
 <tr>
  <td class="footer">
  </td>
  <td class="footer">
  </td>
 </tr>
 </table>

参见：https://jsfiddle.net/tLfur3xz/1/

Answer 1

如果我通过添加 img { width: 100% }.

给图像一个宽度也有效

Solution

Answer 2

将 img 元素的 max-width: 100% 更改为 width: 100%。

https://jsfiddle.net/tLfur3xz/3/

有关详细信息，请参阅 this question。

If you specify table-layout: fixed; in the table css it works.

There seems to be some contradictory terminology in the standard regarding table layouts. In particular, table-layout: auto; says this:

The column width is set by the widest unbreakable content in the cells

列宽由单元格中最宽的牢不可破的内容设置由于图像内容是牢不可破的，它设置单元格的宽度到内容的大小。最大宽度似乎被它覆盖了。

但是，在这种情况下，我认为在 img 元素上使用 max-width 和 width 没有区别，所以简单地设置宽度对我来说似乎是更好的选择。

Answer 3

添加此样式：

table {
  table-layout: fixed;
}

Updated Fiddle

当您使用fixed时：

Table and column widths are set by the widths of table and col elements or by the width of the first row of cells.

MDN documentation

Answer 4

我发现的许多 IE 问题是这样的：您必须在 <head>

中添加以下两行

<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

这解决了几个问题，这些问题占用了我很多时间来解决。

当行中包含大图像时，如何使 IE 11 尊重表中的列宽？

How to make IE 11 honour columns widths in tables when containing large images in rows?

css

internet-explorer

html-table