Safari下summary标签::before伪元素搭配display flex失效求解决方案

问题产生原因 #

• Safari 14.1及更早版本对<summary>元素的CSS布局支持存在原生缺陷：该版本内核会强制将<summary>元素的渲染模式锁定为内置list-item逻辑，即便显式声明display: flex也无法覆盖原生规则，导致所有flex相关属性（flex-direction、justify-content、gap等）全部失效，伪元素无法按预期排列。
• 现有代码仅隐藏了::-webkit-details-marker，但Safari 14中<summary>的原生列表标记没有被完全清除，会额外挤占布局空间，进一步打乱排版。

效果参考：

修复方案 #

方案1：嵌套内层容器实现flex布局（兼容性最优，推荐） #

不直接给<summary>设置flex属性，在<summary>内部新增一层容器承载内容，给内层容器设置flex规则，可兼容所有支持<details>/<summary>的浏览器版本。

修改后的HTML代码（Liquid）：

<div class="product-size-guide product-metafield">
  <details>
      <summary>
        <!-- 新增内层flex容器 -->
        <div class="summary-inner">
          <p class="product-metafield-title">Size guide</p>
        </div>
      </summary>
    <div class="size-guide-content">
      <img src="{{product.metafields.my_fields.size_guide | img_url: '500x'}}"
        alt="Size guide" id="sizeGuideContent">
    </div>
  </details>
</div>

调整后的SCSS代码：

.product-metafield{ 
    summary{
        list-style: none; /* 彻底清除原生列表标记 */
        
        &::-webkit-details-marker{
            display: none;
        }
        /* 兼容Firefox的标记隐藏 */
        &::marker{
            content: "";
            display: none;
        }

        /* 给内层容器设置flex属性 */
        .summary-inner{
            display: -webkit-box; 
            display: -ms-flexbox; 
            display: -webkit-flex; 
            display: flex;
            flex-direction: row-reverse;
            justify-content: flex-end;
            gap: 10px;
            width: 100%;
        }
    }

    /* 伪元素绑定到内层容器，布局规则正常生效 */
    .summary-inner::before{
        font-size: 23px;
        line-height: 25px;
        content: "\002B"; // 加号
    }

    details[open] .summary-inner::before{
        font-size: 23px;
        line-height: 25px;
        content: "\2212"; // 减号
    }
}

方案2：浮动定位实现（无需修改HTML结构） #

如果无法修改Shopify模板的HTML结构，可以放弃flex布局，改用浮动实现相同的排版效果：

.product-metafield{ 
    summary{
        list-style: none;
        &::-webkit-details-marker{
            display: none;
        }
        &::marker{
            content: "";
            display: none;
        }
        /* 清除浮动 */
        &::after{
            content: "";
            display: table;
            clear: both;
        }
    }

    summary::before{
        font-size: 23px;
        line-height: 25px;
        content: "\002B";
        float: left;
        margin-right: 10px; /* 替代gap属性实现间距 */
    }

    details[open] summary::before{
        content: "\2212";
    }
    
    .product-metafield-title{
        float: left;
        margin: 0;
        line-height: 25px; /* 和伪元素行高对齐，避免错位 */
    }
}

内容的提问来源于stack exchange，提问作者14mble