Html 最大高度在Safari中无法正常工作

我正在尝试使用以下代码创建响应性手风琴：

    <div class="tabs specs">
   <div class="tab">
      <input type="checkbox" id="chck1">
      <label class="tab-label" for="chck1">GIFT DETAILS</label>
      <div class="tab-content">
        <p>Simple and Elegant Love Letter/Card Message Included Inside Standard Gift Box.</p>
      </div>
   </div>
   <div class="tab">
      <input type="checkbox" id="chck2">
      <label class="tab-label" for="chck2">SHIPPING TIME</label>
      <div class="tab-content">
        <p>Simple and Elegant Love Letter/Card Message Included Inside Standard Gift Box.</p>
      </div>
   </div>
</div>

<style>
.tabs {
  overflow: hidden;
}
 
.tab {
  width: 100%;
  color: white;
  overflow: hidden;
}
.tab-label {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  background: white;
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
  color: #333333;
  /* Icon */
}
.tab-label:hover {
  background: white;
}
.tab-label::after {
  content: "\276F";
  width: 1em;
  height: 1em;
  text-align: center;
  -webkit-transition: all .35s;
  transition: all .35s;
} 
.tab-content {
  max-height: 0;
  padding: 0 1em;
  color: #333333;
  background: white;
  -webkit-transition: all .35s;
  transition: all .35s;
}
input:checked + .tab-label {
  background: white;
}
input:checked + .tab-label::after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
input:checked ~ .tab-content {
  max-height: 100vh;
  padding: 1em;
}
.specs input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
</style>

礼品详情
标准礼品盒内包含简单优雅的情书/贺卡信息

装运时间
标准礼品盒内包含简单优雅的情书/贺卡信息

.标签{
溢出：隐藏；
}
.标签{
宽度：100%；
颜色：白色；
溢出：隐藏；
}
.标签标签{
显示：-网络工具包盒；
显示器：flex；
-webkit盒包：证明；
证明内容：之间的空间；
垫面：0.5em；
垫底：0.5em；
背景：白色；
字体大小：粗体；
字体大小：15px；
光标：指针；
颜色：#333333；
/*图标*/
}
.选项卡标签：悬停{
背景：白色；
}
.tab标签：：之后{
内容：“\276F”；
宽度：1米；
高度：1米；
文本对齐：居中；
-webkit转换：全部.35秒；
过渡：全部.35s；
} 
.选项卡内容{
最大高度：0；
填充：0.1em；
颜色：#333333；
背景：白色；
-webkit转换：全部.35秒；
过渡：全部.35s；
}
输入：选中+选项卡标签{
背景：白色；
}
输入：选中+。选项卡标签：：后{
-webkit变换：旋转（90度）；
变换：旋转（90度）；
}
输入：选中~。选项卡内容{
最大高度：100vh；
填充：1em；
}
.规格输入{
位置：绝对位置；
不透明度：0；
z指数：-1；
}

当手风琴在Safari（移动和桌面）上工作时，出现了一个错误，内容在我点击标签之前就被显示了

---

我尝试过使用max-height:auto，但没有成功。有人能告诉我我做错了什么吗？

你可以使用

高度

和

不透明度

来制作手风琴的动画，而不是

最大高度

。这也适用于MacOS和iOS上的Safari。为了使“跳跃”在折叠后消失，我还删除了段落的边距。我已经调整了：

.tab内容{
/*删除：最大高度：0*/
/*新的*/
身高：0；
不透明度：0；
/* ... */
}
/*新的*/
.tab内容页{
保证金：0；
}
输入：选中~。选项卡内容{
/*新的*/
高度：自动；
不透明度：1；
/*移除：最大高度：100vh*/
/* ... */ 
}

---

这是一个完整的代码。

您可以使用

height

和

opacity

来设置手风琴的动画，而不是

max height

。这也适用于MacOS和iOS上的Safari。为了使“跳跃”在折叠后消失，我还删除了段落的边距。我已经调整了：

.tab内容{
/*删除：最大高度：0*/
/*新的*/
身高：0；
不透明度：0；
/* ... */
}
/*新的*/
.tab内容页{
保证金：0；
}
输入：选中~。选项卡内容{
/*新的*/
高度：自动；
不透明度：1；
/*移除：最大高度：100vh*/
/* ... */ 
}

---

这是一个完整的代码。

您尝试过这些解决方案吗？@SigurdMazanti是的，我尝试过，没有一个对我有效。使用position:absolute，它甚至会使文本彼此重叠。为什么要尝试

max height:auto

？那不是。你应该举一个可运行的例子，很难说你的问题是什么。你尝试过这些解决方案吗？@SigurdMazanti是的，我尝试过，没有一个对我有效。使用position:absolute，它甚至会使文本彼此重叠。为什么要尝试

max height:auto

？那不是。你应该做一个可运行的例子，很难判断你的问题是什么