更改 `summary` 显示时要小心

前几天我收到了一份非常有用的错误报告（感谢 Kilian！）关于我在 一篇博文 中使用的 <details> 元素没有显示默认的 ▶ 图标，因此看起来很像任何随机的 <p>。

诊断起来并不难。我只是在 Firefox 中打开了页面，在 Firefox DevTools 中检查了元素，并玩弄属性和值，直到我看到 ▶ 回来了。问题是？我使用的是一个（非常旧的）版本的 Normalize.css，它肯定在我对这个网站进行了几次重新设计后就跟着我，并且设置了…

summary {
  display: block; /* the problem */
}

如果你这样做，Firefox 会删除 ▶

小心不要将 <summary> 元素设置为 `display: block`，否则你可能会在 Firefox 中丢失 ▶。我旧的 Normalize.css 中有这个设置。 pic.twitter.com/06KHY892dT

— Chris Coyier (@chriscoyier) 2021 年 1 月 6 日

早在 2016 年，Jon Neal 在 Normalize 中修复了这个问题

summary {
  display: list-item;
}

在 Chrome 中，<summary> 的用户代理样式是block，因此将其设置为 block 不会有任何问题。但在 Firefox 中，据我所知，用户代理样式是 list-item。

因此，Jon 在当前版本的 Normalize 中将其设置为 list-item。

您也可以在 Firefox DevTools 中看到 ▶ 是使用 ::marker 伪元素应用的。只要 <summary> 不再是 list-item，::marker 就会消失。我想这有一定道理，因为 规范中说

::marker 伪元素表示 列表项 的自动生成的 标记框。

所以，::marker 在 Chrome 中的块级元素上起作用可能是 bug？我不知道，但我有点喜欢 ::marker 在其他东西上起作用。正如 Šime Vidas 曾经指出的那样，它相当不错。

在 Safari 中，没有问题，因为 ▶ 似乎来自“阴影内容”？

无论如何，Normalize 的想法是强制它们成为 list-item，这似乎还不错（或者根本不要碰它们）。