我的布局需要修复什么才能与 Internet Explorer 一起使用？

Question

我的网站布局有问题。我注意到它在使用 Internet Explorer 时不正确。您可以在 https://byra.ca

查看实时代码

应该是这样的：

IE 的使用情况：

问题是，我不知道如何解决这个问题。任何人都知道 css 我正在使用的与 IE 不兼容的东西是导致问题的原因吗？

我能够使用 IE9 和 IE10 测试该网站。不知道IE11是不是也有这个问题

谢谢，

Answer 1

解决此问题的一种快速方法是在三个有问题的 div 中的任何一个上设置显式 min-height 属性：

<div class="byra-block to-animate fadeInRight animated" style="background-image: url(/images/design/img_1.jpg); min-height: 500px;">

如果您能为三个块 div 想出一个可接受的 min-height 值，Internet Explorer 和其他浏览器都应该尊重它。

Answer 2

将 flex: 1 更改为 flex: 1 0 auto 到 .byra-text div。

#byra-intro .byra-block > .byra-text {
  position: relative;
  z-index: 10;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

What needs to be fixed for my layout to work with Internet Explorer?