css - Internet Explorer 10 中的错误,表中有 flexbox

标签 css html-table flexbox internet-explorer-10

在 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 中。现在我插入元数据来设置 Internet Explorer 10 兼容性。

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

最佳答案

看起来 max-widthwidth 也是需要的。 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 包裹着 flex 容器。 表格根据内容展开,如果 table-layout:fixed; 设置了 width,则 flex 容器应该站在里面,child 应该包裹内联内容。 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>

关于css - Internet Explorer 10 中的错误,表中有 flexbox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36046627/

相关文章:

html 不是完全流动的

cross-browser - @font-face问题

css - Flexbox 图像高度调整

css - 全高度 flex 的 Angular Material 垫抽屉,内容自动溢出

javascript - 防止嵌入的第三方 CSS 在没有 iframe 的情况下泄露给父级

javascript - 表 - 固定标题,可滚动主体,最强大/最简单的解决方案?

javascript - 访问表内的 td 内部值

javascript - 使用 Javascript 中的用户输入动态更改表格单元格

html - 是否可以在不使用媒体查询的情况下更改 flex 元素的顺序?

javascript - 页面加载时自动加载弹出窗口