更改'摘要”的显示时要小心

最近，一份有用的错误报告（感谢Kilian！）强调了<details></details>我的博客文章之一中的元素。默认的▶图标未显示，使元素显得通用。

调试揭示了罪魁祸首：normanize.css的过时版本，该版本无意间设置了summary { display: block; } 。这导致Firefox抑制了▶图标。

早在2016年，乔恩·尼尔（Jon Neal）通过将样式更改为summary { display: list-item; } 。 Chrome的默认用户代理样式表已经设置<summary></summary>display: block ，因此此更改不会影响它。但是，Firefox的用户代理样式表使用display: list-item ，因此在normalize.css中进行了修复。

Firefox DevTools表明，▶图标是通过::marker伪元素应用的。删除list-item显示样式将删除::marker ，因为规范指出::marker仅适用于列表项目。 Chrome将::marker应用于块级元素的行为可能是一个错误，尽管::marker Beyond List项目的实用程序很吸引人（如ŠimeVidas指出）。

有趣的是，野生动物园没有表现出这个问题，显然是从“影子内容”中渲染的图标。

该解决方案显得直截了当：要么在jormorize.css中使用list-item显示样式，要么避免样式<summary></summary>完全元素。

以上是更改'摘要”的显示时要小心的详细内容。更多信息请关注PHP中文网其他相关文章！