display: contents 是让父容器跳过盒模型生成的正常行为，子元素直接参与父级布局；表格元素、替换元素等不支持该属性，firefox 动画失效、ie 全系不支持，需用 flex/grid 替代或占位容器降级。

display: contents 让父容器“消失”是正常行为，不是 bug

它不是隐藏容器，而是跳过盒模型生成：没有宽高、无 margin/padding/border、不占文档流位置。子元素会直接挂载到父级布局上下文中——比如父是 display: flex，子就变成 flex item；父是 display: grid，子就成为 grid item。常见误判是把它当 display: none 用，结果发现列表项突然横排、间距错乱，其实是预期效果。

哪些元素设了 display: contents 也无效？

浏览器会静默忽略该声明，回退到默认显示行为：

• <table>、<code><tr>、<code><td> 等表格相关元素 —— 表格模型强制要求盒结构 <li> <code><select></select>、<textarea></textarea>、<img> 等替换元素 —— 它们自身有不可替代的渲染逻辑
• <button></button> 在部分旧版 Safari 中表现不稳定，建议加真实环境测试

验证方式：打开 DevTools，在 Elements 面板里看该元素是否还有 layout box（Chrome 的 Layout 标签页里找不到对应盒）；或用 JS 查 getComputedStyle(el).display 是否真返回 "contents"。


使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载

Firefox 中 animation 失效、IE 全系不支持，怎么办？

Firefox 将 display: contents 元素视为非渲染节点，导致动画上下文丢失、animationend 事件不触发、关键帧采样缺失。IE 所有版本均不支持，加前缀或 JS 模拟都无效。

• 最有效解法：直接移除 display: contents 声明，改用 display: flex 或 display: grid 控制子元素布局
• 必须兼容 IE？用辅助占位容器：<div class="contents-fallback"> 包住原内容，设 <code>font-size: 0 防空白符间隙，若为 flex 项需加 min-width: 0
• 避免在 display: flex 或 display: grid 容器内监听父级上的 animationend —— 动画实际发生在子元素上，事件应绑定到子节点

伪元素 ::before/::after 在 display: contents 容器里还能用吗？

能，但行为容易被误解：

• ::before 和 ::after 伪元素仍会渲染，且按规范插入到子元素之前/之后（不是“容器内部”，因为容器没盒子）
• 如果父容器用了 display: contents，又写了 .wrapper::after { content: "x" }，这个伪元素会出现在所有子元素之前，而不是“包裹”它们
• 伪元素本身不继承 display: contents，所以它的 content、display、position 等仍需独立设置；尤其注意 content 不能为 none，否则整个伪元素不生成

真正容易被忽略的是：你写的伪元素，可能根本不在你预想的位置 —— 因为容器没了，它的插入点逻辑变了，得靠开发者工具确认节点顺序和 computed 样式。