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>

“文字很长”超出了灰色div。在其他浏览器中它工作。也在Internet Explorer 11中。现在我插入了meta以设置Internet Explorer 10兼容性。

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

Answer 1

似乎也需要max-width或width。 http://codepen.io/anon/pen/wGgWWW

免责声明：仅通过devellopper工具测试，不是真正的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>

来自相关代码的

编辑。表正在包装Flex容器。表根据内容进行扩展，如果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 2

好吧，因为相同的代码在Chrome中运行而不在IE中，所以似乎确实存在错误。我可以通过使用 px 而不是％为第二个div修复您的代码，同样通过删除表格。不知何故，表和百分比的交互导致了一个错误。

对我来说很明显，问题在于计算宽度的方式。 50％是什么意思？它是偏移父项的宽度的一半，但偏移父项是表格分区，它根据其内容计算其宽度。你得到一个循环引用。将div的宽度更改为静态px值，然后打破圆圈。

无论哪种方式，在表格中使用弹性箱有什么意义？

Answer 3

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

Internet Explorer 10中的错误，表中包含flexbox

3 个答案: