Question

我想创建包含2个部分的全高度部分。

第一个是文本，第二个是图像。

我正在使用flexbox，它可以在Chrome，FF，Edge中正常工作，但不能在IE中使用。

#super {

  height: 100vh;

  #el-1 {

    display: flex;
    flex-flow: column;
    height: 100%;

    .above,
    .below {
      display: flex;
      flex-flow: column;
      align-items: center;
    }

    .above {
      text-align: center;
      padding: 100px 0;
    }

    .below {

      img {
        width: 60%;
        max-width: 100%;
        height: auto;
        vertical-align: middle;
      }

    }

  }

}

＆＃13;

#super {
  height: 100vh;
  #el-1 {
    display: flex;
    flex-flow: column;
    height: 100%;
    .above,
    .below {
      display: flex;
      flex-flow: column;
      align-items: center;
    }
    .above {
      text-align: center;
      padding: 100px 0;
    }
    .below {
      img {
        width: 60%;
        max-width: 100%;
        height: auto;
        vertical-align: middle;
      }
    }
  }
}

＆＃13;

<div id="super">

  <div id="el-1">

    <div class="above">
      <h1>Some crazy text here!!!</h1>
      <h2>Wow a second line - amazing :o</h2>
    </div>

    <div class="below">
      <img src="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg">
    </div>

  </div>

</div>

＆＃13;

Answer 1

IE因许多flexbugs而臭名昭着。它对于非常简单的flex布局是可靠的。但即使是最微小的复杂性，IE也需要“特别关注”（即丑陋的黑客攻击）。

在这种特殊情况下，IE似乎需要对图像的父级进行高度限制：

而不是：

$data['descriptions']

试试这个：

.below { }

img {
    width: 60%;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

revised fiddle

Answer 2

为避免浏览器兼容性，您可以尝试此选项。我所做的是从＆＃34; .below＆＃34;删除flex。 class并将img元素集中在其中。希望它有所帮助

#super {

  height: 100vh;

  #el-1 {

    display: flex;
    flex-flow: column;
    height: 100%;

    .above {
      display: flex;
      flex-flow: column;
      align-items: center;
    }
    .below {
      text-align: center;
    }

    .above {
      text-align: center;
      padding: 100px 0;
    }

    .below {

      img {
        width: 60%;
        max-width: 100%;
        height: auto;
        vertical-align: middle;
      }

    }

  }

}

Internet Explorer在flexbox中拉伸图像

2 个答案: