具有绝对定位的 Flex 在 Safari 中不起作用答案

【问题标题】：Flex with absolute positioning does not work in safari具有绝对定位的 Flex 在 Safari 中不起作用
【发布时间】：2017-05-15 02:17:39
【问题描述】：

我正在尝试使用 flexbox 制作文本滑块。

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

在实际代码中，非活动元素将设置为 translateX(100%)，活动索引元素将设置为 0%。

我之所以要使用 flexbox 是 Ques*: 应该与问题文本的第一行对齐，并且 text-container div 应该是中心question div 无论 q-text 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>

【问题讨论】：

由于您的文字重叠，即使在 Chrome 中，您能否发布一张显示所需结果的图片？
我希望所有的东西都重叠。这样我就可以在加载时将所有不活动的设置为 translateX(100%) 然后使用 js 一个一个地滑动。但在 safari flex center 中不起作用。

标签： javascript html css flexbox

【解决方案1】：

这是一种选择，使用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>

【讨论】：

【解决方案2】：

我猜你希望所有问题都居中，它们应该一个接一个地出现

这里的东西很少，Flexbox 和定位不能很好地协同工作

查看此链接以获取参考flex and absolute positioning

如果您希望所有的 div 都绝对定位，请用 div 包裹每个文本容器 div 并使其绝对定位。

检查以下sn-p

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

.question {
  display: -webkit-flex;
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  -webkit-justify-content: center;
  -webkit-align-items: center;
}
.abs{
  position:absolute;
  
  color:red;
}

.text-container {
  display: -webkit-flex;
  display: flex;
  width: 100%;
  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="abs">
         <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>
   
      
      <div class="abs">
       <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>
     
      <div class="abs">
       <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>

  </div>
</body>

</html>

希望对你有帮助

【讨论】：

感谢您的回答，但我希望所有的东西都像我的示例 sn-p 一样居中和重叠。但 div 堆叠不重叠。我正在制作滑块。在实际代码中会有一个按钮，以便您可以移动到下一个或上一个。
你能添加一个你想要的显示效果的快照吗
我的代码 sn-p 结果正是我想要的。文本容器位于黑框中心的不同位置。这是因为文本容器的高度不同。
修改了代码 sn-p...确认这是不是你要找的
感谢您的努力，但 Qest2 与其他 Qest* 不一致，并且代码在 safari ( 10 ) 中与我的代码相同...