Div 高度仅与 IE11 中的属性上声明的不同

Question

我正在尝试创建一个垂直和水平居中的网页 div，具有定义的高度和宽度，并在中间分开。几乎就像一本打开的书。

我在 Chrome/Firefox/Safari 中实现这一点没有问题，但无法在 IE11 中反映出来，因为 'book' 的一半高度比另一半高，这让我相信'height: 863px' 属性中的 .loginContainer 导致了这个问题，因为一旦我移动它看起来稍微好一点。

不完全确定，但我想我需要为容器指定一个明确的高度以阻止内部内容被压扁 - 简单地删除这个属性允许容器太小所以内容看起来很局促一旦我把文字放在那里。

我曾尝试删除属性并在内部内容上使用填充来创建一些 space 但我不认为这是正确的方法并且使它看起来完全不同到我正在关注的模型。

我在这里创建了一个 JSFiddle；

https://jsfiddle.net/e02cqdr6/2/

并认为问题出在；

.loginContainer {
display: flex;
justify-content: flex-start;
flex-grow: 0;
flex-shrink: 1;
margin: 0 auto;
width: 1338px;
height: 863px;
border-radius: 15px;}

html,
body {
  background-color: rgb(27, 27, 27);
  height: 100%;
  min-height: 100%;
  /* for firefox */
}

.pageContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.loginContainer {
  display: flex;
  justify-content: flex-start;
  flex-grow: 0;
  flex-shrink: 1;
  margin: 0 auto;
  width: 1338px;
  height: 863px;
  border-radius: 15px;
}

.leftContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  text-align: center;
  background-color: green;
  width: 621px;
  border-radius: 15px 0 0 15px;
}

.rightContainer {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  align-items: center;
  width: 717px;
  border-radius: 0 15px 15px 0;
}

.titleContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
}

input {
  height: 30px;
  width: 220px;
  padding: 0 10px 0 10px;
  box-shadow: none !important;
  border: 1px solid rgb(243, 241, 241);
  border-radius: 15px;
  background-color: rgb(243, 241, 241);
  color: grey;
}

a {
  font-size: 0.7rem;
  color: orange;
  text-decoration: none;
}

.nextBtn {
  margin-top: 10px;
  background-color: rgb(134, 200, 223);
  color: #ffffff;
}

.assetContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

.descContainer {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 100%;
}

.descHeading {
  margin: 0 auto;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 100;
  padding-bottom: 5px;
}

.productDesc {
  margin: 0 auto;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 100;
  width: 440px;
}

.assetLogoBlack {
  width: 100%;
  height: 100%;
}

.logoContainer {
  width: 100%;
}

.servicesLogo {
  width: 30%;
}

<div class="pageContainer">
  <div class="loginContainer">
    <div class="leftContainer">
      <div class="assetContainer">
        <div class="logoContainer">
          <img src="/assets/ilogo.svg" class="servicesLogo">
          <img src="/assets/cslogo.svg" class="servicesLogo">
        </div>
        <div class="descContainer">
          <p class="descHeading">Lorem ipsum dolor sit amet</p>
          <p class="productDesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat sodales arcu id tincidunt. Ut a laoreet risus. Suspendisse potenti. Curabitur in ultricies risus. Vivamus convallis non libero commodo malesuada. Cras eu neque vulputate
            lectus sagittis ullamcorper sit amet vitae ante. Integer pellentesque neque eget molestie vehicula. </p>
        </div>
      </div>
    </div>

    <div class="rightContainer">

    </div>
  </div>
</div>

所以我希望它看起来像这样：https://ibb.co/T2Cc59V 但它看起来像这样：https://ibb.co/M8zZ9rs

重申一下，这个问题只存在于IE11中。

没有什么是显而易见的，我也没有抛出任何错误，所以我完全不知道如何解决这个问题。

Answer 1

感谢您提供的所有信息，我最终将其剥离回最基本的部分以查看导致问题的原因，因为它在 jsfiddle 上运行良好。结果是我需要用于背景的资产周围的白色 space 使它看起来好像没有填充父 div.

Div 高度仅与 IE11 中的属性上声明的不同

Div height differs to what is declared on the property in IE11 only

html

css

internet-explorer-11

Div 高度仅与 IE11 中的 属性 上声明的不同

Div height differs to what is declared on the property in IE11 only

html

css

internet-explorer-11

Div 高度仅与 IE11 中的属性上声明的不同