代码之家 › 专栏 › 技术社区 › Michael B

IE 11中的柔性容器未正确对齐

flexbox internet-explorer css html

Michael B · 技术社区 · 6 年前

我对下面的代码片段有问题:我需要让它在InternetExplorer11中工作。在Chrome、Firefox和Eclipse中,它看起来应该如此。

有3种元素(红、黄、绿),彼此相得益彰。另一个50%高度的蓝色元素在其他元素之上。 它应该是这样的:

然而,internet explorer 11把蓝色元素放在右边会使其他元素受益,而不是放在上面。你们能帮我解决那个问题吗?

这就是IE11的样子-不应该是这样

.wrapper {
    display: block;
    height: 50px;
}

.flex-wrapper {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    margin: 2px 0;
}

.outer,
.inner {
    width: 100%;
    max-width: 100%;
    display: flex;
}

.outer {
    height: 100%;
}

.inner {
    height: 30%;
    align-self: center;
    position: absolute;
}

.inner-element,
.outer-element {
    height: 100%;
    max-width: 100%;
    align-self: flex-start;
}

<div class="wrapper">
<div class="flex-wrapper">
    <div class="outer">
        <div class="outer-element" style="width: 10%; background-color: red"></div>
        <div class="outer-element" style="width: 50%; background-color: yellow"></div>
        <div class="outer-element" style="width: 40%; background-color: green"></div>
    </div>

    <div class="inner">
        <div class="inner-element" style="width: 50%; background-color: blue"></div>
    </div>
</div>
</div>

2 回复 | 直到 6 年前

Hidden Hobbes 6 年前

问题

问题是你的定位 .inner 当然,但不给它一个具体的位置。这意味着浏览器首先呈现的地方就是它将在屏幕上输出的地方。看起来IE处理这个问题的方式与其他浏览器不同,这就是为什么你会遇到这种差异。

解决方案

需要进行以下修改:

添加 left: 0; 到 内部 将其与 .flex-wrapper
添加 top: 50%; 到 内部 降低50% .flex包装 和 transform: translateY(-50%); 把它向后移50%的高度

.wrapper {
  display: block;
  height: 50px;
}

.flex-wrapper {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  margin: 2px 0;
}

.outer,
.inner {
  width: 100%;
  max-width: 100%;
  display: flex;
}

.outer {
  height: 100%;
}

.inner {
  height: 30%;
  align-self: center;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.inner-element,
.outer-element {
  height: 100%;
  max-width: 100%;
  align-self: flex-start;
}

<div class="wrapper">
  <div class="flex-wrapper">
    <div class="outer">
      <div class="outer-element" style="width: 10%; background-color: red"></div>
      <div class="outer-element" style="width: 50%; background-color: yellow"></div>
      <div class="outer-element" style="width: 40%; background-color: green"></div>
    </div>

    <div class="inner">
      <div class="inner-element" style="width: 50%; background-color: blue"></div>
    </div>
  </div>
</div>

Amaury Hanser 6 年前

我会做些改变。

第一:
-位置 .inner
-由于它的位置,使它达到最大高度
-让它 display: flex

.inner {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    display: flex;
}

第二: -给予高度 .inner-element -以它为中心

.inner-element {
    height: 30%;
    align-self: center;
}

.wrapper {
    display: block;
    height: 50px;
}

.flex-wrapper {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    margin: 2px 0;
}

.outer,
.inner {
    width: 100%;
    max-width: 100%;
    display: flex;
}

.outer {
    height: 100%;
}

.inner {
    /*height: 30%; No need for that anymore */
    /*align-self: center; No need for that anymore */
    position: absolute;
    top: 0; 
    bottom: 0;
    left: 0; /* Now it's in the right position */
    display: flex; /* To be able to align the inner-element */
}

.inner-element,
.outer-element {
    height: 100%;
    max-width: 100%;
    align-self: flex-start;
}

.inner-element {
    height: 30%; /* Make it the right height */
    align-self: center; /* Center it */
}

<div class="wrapper">
<div class="flex-wrapper">
    <div class="outer">
        <div class="outer-element" style="width: 10%; background-color: red"></div>
        <div class="outer-element" style="width: 50%; background-color: yellow"></div>
        <div class="outer-element" style="width: 40%; background-color: green"></div>
    </div>

    <div class="inner">
        <div class="inner-element" style="width: 50%; background-color: blue"></div>
    </div>
</div>
</div>