移动端Safari浏览器Flexbox布局Footer显示异常求助

问题描述 #

我正在调整网站移动端Footer布局，该布局在Chrome等浏览器显示正常，但Safari移动端表现异常，希望能和其他浏览器表现一致。由于没有苹果设备无法自行排查，当前移动端Footer的CSS代码如下：

@media screen and (max-width: 767px) {
#footer {
        margin: 0 5% 50px;
        /*re-build the menu box as a flex box instead of block*/
        .menu-footer {
            display: flex;
            float: unset;
            width: 100%;
            /*rebuild the list as a flex box instead of block*/
            ul {
                display: flex;
                justify-content: space-evenly;
                flex-wrap: wrap;
                column-gap: 15px;
                row-gap: 15px;
                width: 95%;
                margin-top: 25px;
                li {
                    margin-right: 0; /*undoing the margin*/
                }
            }
        }
    }
}

已确认所用CSS属性均在Safari支持范围内，添加厂商前缀无效，寻求有Safari开发经验的开发者帮助。

可能的修复方案 #

针对Safari移动端flex布局的常见兼容性问题，给出以下几个排查/修改方向：

• 重置列表默认样式：Safari对ul/li的默认内边距、外边距解析可能和其他浏览器有差异，给ul添加padding: 0并重置list-style: none，避免默认样式干扰布局：

  ul {
      display: flex;
      justify-content: space-evenly;
      flex-wrap: wrap;
      column-gap: 15px;
      row-gap: 15px;
      width: 95%;
      margin-top: 25px;
      padding: 0; /* 新增 */
      list-style: none; /* 新增 */
      li {
          margin-right: 0;
      }
  }
  

• 调整flex容器的宽度与盒模型：给#footer添加box-sizing: border-box，确保宽度计算包含内边距/边框，同时将.menu-footer的width:100%替换为flex:1，强化flex容器的布局特性：

  #footer {
      margin: 0 5% 50px;
      box-sizing: border-box; /* 新增 */
      .menu-footer {
          display: flex;
          float: unset;
          flex: 1; /* 替换width:100% */
          ul {
              /* 原有样式 */
          }
      }
  }
  

• 替换space-evenly兼容写法：部分旧版Safari对justify-content: space-evenly的支持存在bug，可以用space-between配合伪元素模拟相同效果：

  ul {
      display: flex;
      justify-content: space-between; /* 替换space-evenly */
      flex-wrap: wrap;
      column-gap: 15px;
      row-gap: 15px;
      width: 95%;
      margin-top: 25px;
      padding: 0;
      list-style: none;
      /* 添加伪元素填充首尾空白 */
      &::before, &::after {
          content: '';
          display: block;
      }
      li {
          margin-right: 0;
      }
  }
  

• 明确flex子元素的尺寸规则：给li添加flex: 0 1 auto（或根据需求设置固定基础宽度，比如flex: 0 1 calc(33.33% - 10px)），避免Safari对flex子元素的尺寸计算出现异常：

  li {
      margin-right: 0;
      flex: 0 1 auto; /* 新增 */
  }
  

内容的提问来源于stack exchange，提问作者Sorin Lascu