使用 ::before pseudo 显示 flex 在 Safari 上不起作用

Question

在伪元素上使用 display flex 似乎在 Safari 上不起作用。在 Chrome 这确实有效。有谁知道 Safari 的修复程序。或者碰巧知道为什么这在 Safari 上不起作用？

我正在使用详细信息摘要 HTML 元素将其用作手风琴。

chrome (V94) 上的输出：

在 Safari (V14.1) 上输出

我的css/scss代码：

.product-metafield{ 
    summary{
        display: -webkit-box; 
        display: -ms-flexbox; 
        display: -webkit-flex; 
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        gap: 10px;

        &::-webkit-details-marker{
            display: none;
        }
    }

    summary::before{
        font-size: 23px;
        line-height: 25px;
        content: "[=10=]2B"; // Plus
    }

    details[open] summary::before{
        font-size: 23px;
        line-height: 25px;
        content: "12"; // Minus
    }
    
}

HTML 片段 (Liquid/Shopify)

      <div class="product-size-guide product-metafield">
        <details>
            <summary>
              <p class="product-metafield-title">Size guide</p>
            </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>

Answer 1

刚刚用于我在 summary::before 上的用例 position: absolute; 并用 margin-left: 20px;

将段落移到了右边

找到相同的问题，答案为

Certain HTML elements, like <summary>, <fieldset> and <button>, do not work as flex containers. The browser's default rendering of those elements UI conflicts with the display: flex declaration.

更新后的代码：

.product-metafield{ 
    summary{
        &::-webkit-details-marker{
            display: none;
        }
    }

    summary::before{
        position: absolute;
        font-size: 23px;
        line-height: 25px;
        content: "[=10=]2B"; // Plus
    }

    details[open] summary::before{
        font-size: 23px;
        line-height: 25px;
        content: "12"; // Minus
    }
    
}

.product-metafield-title{
    margin-left: 20px;
}

HTML 片段 (Liquid/Shopify)

      <div class="product-size-guide product-metafield">
        <details>
            <summary>
              <p class="product-metafield-title">Size guide</p>
            </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>

使用 ::before pseudo 显示 flex 在 Safari 上不起作用

Display flex with ::before pseudo not working on Safari

css

sass