如何让高度为0px的元素保留宽度且兼容Safari浏览器？

嘿，这个问题我在做跨端项目时碰过好多次，Safari的布局逻辑确实有点“固执”，但完全能找到兼容的解决方案！下面是几个经过实战验证的方案，你可以根据自己的场景选：

方案1：最直接的固定写法（无动画需求首选） #

核心思路就是强制把元素高度压到0，隐藏溢出内容，同时明确宽度规则：

.hidden-keep-width {
  height: 0;
  overflow: hidden;
  /* 固定宽度的话直接写死 */
  width: 200px;
  /* 如果要让宽度由内容撑开，换成下面这两行 */
  /* display: inline-block; */
  /* min-width: fit-content; */
}

Safari兼容性说明：这个写法在桌面端和移动端Safari都完全生效，height:0会强制收缩高度，width/min-width牢牢锁住宽度，overflow:hidden确保内容不会跑出来。

方案2：支持平滑展开/收起动画的写法 #

如果你的元素需要做展开收起的过渡动画，用max-height替代height会更合适——因为height过渡需要明确的目标高度，而max-height可以设一个足够大的值来覆盖所有情况：

.hidden-keep-width {
  max-height: 0;
  overflow: hidden;
  width: 200px;
  /* 加上过渡动画 */
  transition: max-height 0.3s ease;
}

/* 展开时的类 */
.hidden-keep-width.open {
  max-height: 1000px; /* 设成比元素最大可能高度大的值就行 */
}

Safari兼容性说明：Safari对max-height的过渡支持很稳定，既能保留宽度，又能实现丝滑的动画效果。

方案3：修复Safari对min-height的特殊处理 #

你提到Chrome/Firefox能用的min-height设置在Safari里失效——这是因为Safari计算min-height的逻辑和其他浏览器不一样，比如元素包含浮动内容时，它可能不会正确收缩高度。

如果你的场景必须用min-height，可以加个display:flex或者contain属性强制Safari重新计算布局：

.hidden-keep-width {
  min-height: 0;
  height: 0;
  overflow: hidden;
  width: 200px;
  /* 兼容Safari的min-height计算问题，兼容性更好的写法 */
  display: flex;
  flex-direction: column;
}

或者用更现代的contain属性（Safari 14.1+支持）：

.hidden-keep-width {
  min-height: 0;
  height: 0;
  overflow: hidden;
  width: 200px;
  contain: layout paint;
}

几个避坑提醒 #

• 别用inline元素：inline元素的宽高完全由内容决定，没法强制设置height:0，一定要改成block/inline-block/flex这类块级/行内块级类型。
• 别用visibility:hidden：这个只是隐藏内容，但元素的占位（包括高度宽度）都会保留，不符合你“高度为0”的需求。
• 别用display:none：这个会直接把元素从布局里移除，宽度自然也没了，完全不适用。

内容的提问来源于stack exchange，提问作者Rens Tillmann