Chrome 131中设置display:contents的<details>元素是否存在失效Bug？

直接给结论：这不是预期行为，属于Chrome的实现Bug。

为什么这么判断？ #

1. 规范层面没有禁止<details>使用display:contents——该属性的核心作用是让元素自身不生成布局盒子，仅将子元素暴露给父级布局，<details>作为常规元素没有被排除的理由。
2. DevTools显示属性已应用，但实际渲染仍保持display:block，这种样式面板反馈与实际效果脱节的情况，是浏览器属性解析与渲染逻辑不一致的典型Bug表现。
3. Firefox中该属性可正常工作，说明这不是跨浏览器的规范差异，而是Chrome的适配遗漏问题。

Chrome 131刚开放<details>对flex/grid的支持，可能在display:contents的逻辑处理上存在疏忽：<details>自带折叠/展开交互，浏览器或许为了维护该交互逻辑，错误地强制保留了其块级盒子，忽略了display:contents的设置。

替代临时方案的思路 #

要是你对现有的@supports适配方案不满意，可以试试：

• 给<details>内除<summary>外的内容添加自定义类，直接通过类选择器控制布局，绕开<details>的display属性限制
• 用JavaScript监听<details>的toggle事件，动态切换其display属性，确保渲染效果与设置一致

建议你将这个问题提交到Chrome的Bug追踪系统，把Chrome与Firefox的对比现象描述清楚，并附上你的示例代码，官方大概率会跟进修复。

内容的提问来源于stack exchange，提问作者Mark Notton