Question

更新回答

我遇到的问题是来自一个旧的Doctype声明，该声明阻止了display flex在IE中正常工作。（IE上表和显示flex的另一个“错误”是我必须强制显示屏阻止或弯曲td标签。）

我在这里留下我之前的问题，以防有人遇到同样的问题。

我完全陷入了这个问题。我尝试过很多东西，但似乎都没有。我必须使一个旧的HTML4网站更具响应性，并且它充满了表格。使用flexbox我可以按照我想要的方式重新设置它，但是当我检查IE时，所有的flex规则似乎都完全被忽略了。

我尝试了一个简单的代码来检查表格上的弹性规则，但我无法按照我想要的方式工作。（两个容器都应以相同的方式显示）

这是HTML：

<body>
  <table>
    <tr class="container">
      <td class="child"> 1 </td>
      <td class="child"> 2 </td>
      <td class="child"> 3 </td>
      <td class="child"> 4 </td>
    </tr>
  </table>

  <div class="container">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
  </div>
</body>

这是SASS：

table
    width: 100%
    table-layout: fixed
    display: block
    tbody
        display: block
.container
    display: flex
    flex-direction: column
    width: 100%
    margin: 10px
    .child
        height: 100px
        width: 100px
        box-sizing: border-box
        margin: 5px
        display: inline-flex
        align-items: center
        justify-content: center
        &:nth-child(1)
            background-color: lightcoral
            order: 1
        &:nth-child(2)
            background-color: lightgreen
            order: 0
        &:nth-child(3)
            background-color: yellow
            order: 3
        &:nth-child(4)
            background-color: lightpink
            order: 2

我花了很多时间在这上面，我觉得我可能会遗漏一些非常明显的东西，希望有人能帮我解决这个问题。

Answer 1

我最近遇到了类似的问题。我相信IE中的问题与'width'属性有关。尝试为容器添加'max-width：100％'，为孩子添加'max-width：100px'。

在IE中覆盖带有flexbox错误的表格显示

1 个答案: