table 中带有弹性框的 Internet Explorer 10 中的错误

Question

在 Internet Explorer 10 中，我在这种情况下遇到 flexbox 问题：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=10" />
    </head>
    <body>
        <div style="width: 500px; background-color: grey;">
            <table>
                <tbody>
                    <tr>
                        <td>
                            <div style="display: flex; display: -ms-flexbox;">
                                <span style="display: inline-block; max-width: 100%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacus dui, volutpat vel venenatis at, facilisis non sem. Maecenas eu tempus erat. Maecenas malesuada non orci ut dapibus. Curabitur venenatis eget diam ut mollis.</span>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

"text very long"超出灰色div。在其他浏览器中它可以工作。同样在 Internet Explorer 11 中。现在我插入元数据以设置 Internet Explorer 10 兼容性。

更新：我用你的更正更新了代码，但它在我的情况下仍然不起作用。

Answer 1

您似乎忘记关闭 <span></span> 标签。我会从那里开始。我有一支适用于 IE10 的工作笔 http://codepen.io/cheapwebmonkey/pen/eZgzLP

Answer 2

看起来也需要 max-width 或 width。 http://codepen.io/anon/pen/wGgWWW

免责声明：仅通过开发者工具测试，不是真正的 IE10

.a{
  display: flex; 
  width:50%;
  background:red;
}
span {
  display:inline-block;
  max-width:100%;
}

        <div style="width: 50%; background-color: grey;">
            <div class="a" >
                <span >Text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long very long text very long text very long text very long text very long text very long text very long</span>
            </div>
        </div>

EDIT 来自有问题的编辑代码。 table 正在包装弹性容器。 Table 根据内容展开，如果 table-layout:fixed; 设置为 width，则 flex 容器应位于其中，子内容应包裹内联内容。 http://codepen.io/anon/pen/oxBeoz

table {
  table-layout:fixed;
  width:100%;
}

<div style="width: 500px; background-color: grey;">
  <table>
    <tbody>
      <tr>
        <td>
          <div style="display: flex; display: -ms-flexbox;">
            <span style="display: inline-block; max-width: 100%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacus duploplopoloppl i, volutpat vel venenatis at, facilisis non sem. Maecenas eu tempus erat. Maecenas malesuada non orci ut dapibus. Curabitur venenatis eget diam ut mollis.</span>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 3

嗯，由于相同的代码在 Chrome 中有效，而在 IE 中无效，看来确实存在错误。我可以通过在第二个 div 中使用 px 而不是 % 来修复您在 IE 上的代码，也可以通过删除 table. table 和百分比的交互以某种方式导致错误。

对我来说，很明显问题出在计算宽度的方式上。 50%是什么意思？它是偏移父级宽度的一半，但偏移父级是 table division，它根据其内容计算其宽度。你得到一个循环引用。将 div 的宽度更改为静态 px 值并打破圆圈。

不管怎样，在 table 中使用 flexbox 有什么意义？

table 中带有弹性框的 Internet Explorer 10 中的错误

Bug in Internet Explorer 10 with flexbox in table

css

html-table

flexbox

internet-explorer-10