具有绝对定位功能的Flex在Safari中不起作用

小提琴

我正在尝试使用flexbox创建文本滑块。

我希望问题div下的所有子元素都像您在Chrome浏览器中看到的那样折叠。

在实际代码中，非活动元素将被设置为translateX（100％），活动索引元素将被设置为0％。

我要使用flexbox的原因是Ques *：应该与问题文本的第一行对齐，并且无论q-text div的长度是多少，text-container div都应该是问题div的中心。（尝试不使用flex但我无法使Quest *和文本的第一行对齐）

与示例代码一样，由于文本长度不同，它具有不同的中心位置。

在Chrome中可以正常运行。但是，它不在Safari（使用Safari的最新版本）中居中。

如果有更好的方法可以做到这一点，我很高兴见到！

#container {
  width: 100%;
  height: 200px;
  background: black;
}

.question {
  display: -webkit-flex;
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  -webkit-justify-content: center;
  -webkit-align-items: center;
}

.text-container {
  display: -webkit-flex;
  display: flex;
  width: 100%;
  position: absolute;
  color: white
}

.q {
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-justify-content: center;
  -webkit-align-items: center;
  align-self: baseline;
}
.q-text {
  width: 75%;
  padding-right: 12%;
}

<html>

  <body>

    <div id="container">
      <div class="question">
        
        <div class="text-container">
          <div class="q">
            Qest1:
          </div>
          <div class="q-text">
            1Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type an
          </div>

        </div>
         <div class="text-container">
          <div class="q">
            Qest2:
          </div>
          <div class="q-text">
            2Lorem Ipsum is simply dummy text of the printing and ty
          </div>

        </div>
         <div class="text-container">
          <div class="q">
            Qest3:
          </div>
          <div class="q-text">
            3Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when
          </div>

        </div>
        
      </div>

    </div>
  </body>

</html>

一个儿子

这是一个选项，使用display: inline-block代替flexbox和transform: translate。

window.addEventListener('load', function() {
  document.querySelector('button').addEventListener('click', function() {
    var ques = document.querySelector('.text-container:not(.hidden)');
    ques.classList.toggle('hidden');    
    var next = ques.nextElementSibling;
    if (next) {
      next.classList.toggle('hidden');
      return;
    }
    document.querySelector('.text-container').classList.toggle('hidden');
  })
})

.container {
  height: 160px;
  background: black;
}
.question {
  position: relative;
  margin: 0 auto;
  width: 90%;
  height: 100%;
  overflow: hidden;
}
.text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%,-50%);
  color: white;
  transition: left 0.5s;
}
.text-container.hidden {
  left: -50%;
}
.q {
  display: inline-block;
  width: 20%;
  vertical-align: top;
}
.q-text {
  display: inline-block;
  width: 80%;
  vertical-align: top;
  padding-right: 12%;
  box-sizing: border-box;
}
button {
  margin: 15px 0;
  padding: 10px;
}

<div class="container">
  <div class="question">

    <div class="text-container">
      <div class="q">
        Qest1:
      </div><div class="q-text">
        1Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type an
      </div>
    </div>

    <div class="text-container hidden">
      <div class="q">
        Qest2:
      </div><div class="q-text">
        2Lorem Ipsum is simply dummy text of the printing and ty
      </div>
    </div>

    <div class="text-container hidden">
      <div class="q">
        Qest3:
      </div><div class="q-text">
        3Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when
      </div>
    </div>

  </div>
</div>
<button>Next question</button>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。