时间戳

首页 > 解决方案 > Flexbox 垂直内容与 Internet Explorer 中的溢出对齐

css - Flexbox 垂直内容与 Internet Explorer 中的溢出对齐

问题描述

编辑：来到这里的每个人都试图为 IE 的 flexbox 溢出行为找到解决方案，看看这个 stackoverflow 线程。似乎这不会被修复。我能够解决此问题，请参阅下面的答案，但可能存在无法解决的情况（响应高度）。

我遇到了 IE11 问题（惊喜），我不知道如何解决。溢出其父容器的子容器在大小转换时应水平和垂直居中。我正在尝试使用 flexbox 来实现，但其他任何可行的方法都可以。

在研究 IE flexbox 对齐问题时，我发现了一个在使用 min-height 时适用的错误，在这种情况下，变通办法没有帮助。

下面是该问题的简化示例。在 IE 中观看，您会看到形状从顶部而不是中心开始动画。每个其他浏览器都将保持形状居中。

这是一个可以玩的小提琴：jsfiddle

任何想法将不胜感激:)

.container {
  background-color: grey;
  height: 150px;
  width: 100%;
  justify-content: center;
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.child {
  background-color: lightgrey;
  height: 100%;
  width: 100%;
  flex: 1 0 auto;
  align-self: center;
  font-size: 5em;
  animation: changesize 3s infinite;
  
}

svg {
  width: 100%;
  height: 100%;
}

.st0{fill:#00748A;}
.st1{fill:#D3D938;}

@keyframes changesize {
  0% { width: 100%; height: 100%; }
  50% { width: 500%; height: 500%; }
  100% { width: 100%; height: 100%; }
}
<div class="container">
  <div class="child">
      <svg version="1.1" id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 3000"><circle class="st0" cx="1500" cy="1500" r="1401.2"/><circle class="st1" cx="1500" cy="1500" r="45.2"/>
    </svg>
  </div>
</div>

标签： cssflexboxinternet-explorer-11

解决方案

因为.container有一个固定的高度，我们可以使用绝对定位来居中.child。

.container {
  background-color: grey;
  height: 150px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.child {
  background-color: lightgrey;
  height: 100%;
  width: 100%;
  left: -200%;
  right: -200%;
  top: -200%;
  bottom: -200%;
  margin: auto;
  position: absolute;
  font-size: 5em;
  animation: changesize 3s infinite;
}

svg {
  width: 100%;
  height: 100%;
}

.st0 {
  fill: #00748A;
}

.st1 {
  fill: #D3D938;
}

@keyframes changesize {
  0% {
    width: 100%;
    height: 100%;
  }
  50% {
    width: 500%;
    height: 500%;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}
<div class="container">
  <div class="child">
    <svg version="1.1" id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 3000"><circle class="st0" cx="1500" cy="1500" r="1401.2"/><circle class="st1" cx="1500" cy="1500" r="45.2"/>
        </svg>
  </div>
</div>

推荐阅读