Safari 不支持 SUMMARY 元素的显示属性

Question

display: grid未正确应用于summarySafari 中的以下元素。在现代 Edge、Chrome 和 Firefox 中，列是并排的（使用 CSS 网格）。在 Safari 中，列是全宽且堆叠的。

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  justify-content: start;
  justify-items: stretch;
}

.card {
  background: #eee;
  border-radius: 4px;
}

[class*="col"] {
  display: block;
  padding: 3px 6px;
  box-sizing: border-box;
}

.col-2 {
  grid-column: span 2;
}

.col-10 {
  grid-column: span 10;
}

details .indicator::after {
   content: '+';
}

details[open] .indicator::after {
   content: '-';
}

<details>
  <summary class="grid card">
    <div class="col-10">Click to View More</div>
    <div class="col-2 indicator"></div>
  </summary>
  <div class="contents">
    Here's the amazing contents that are displayed when details are expanded.
  </div>
</details>

我已经开发了以下解决方法，但我对不需要附加元素的方法感兴趣。

<summary class="card">
    <div class="grid"> <!-- <-- I don't want this -->
        <div class="col-10">Click to View More</div>
        <div class="col-2 indicator"></div>
    </div>
</summary>