更改'摘要”的顯示時要小心

最近，一份有用的錯誤報告（感謝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中文網其他相關文章！