我的布局需要修复哪些内容才能使用Internet Explorer？

Question

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

查看实时代码

它应该如何：

IE如何：

问题是，我不知道如何解决这个问题。任何人都知道我使用的css是否与IE兼容并导致问题？

我能够使用IE9和IE10测试网站。我不知道问题是否也发生在IE11上。

谢谢，

Answer 1

解决此问题的一种快捷方法是在三个有问题的min-height中的任意一个上设置明确的div属性：

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

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

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;