在Edge浏览器中，某些div元素明明写了内容却没有任何显示，是前端开发中比较常见的问题。造成这种现象的原因往往和CSS解析、布局计算或浏览器默认样式有关，而不是HTML结构本身有误。
常见导致div不显示的原因
1. 父容器高度塌陷
当div使用浮动或者绝对定位，而父容器没有设置明确高度，也没有清除浮动时，Edge可能计算出父容器高度为0，导致子div被裁切不可见。
2. 使用了Edge不支持的CSS属性
部分较新的CSS属性在旧版Edge（非Chromium内核）中不被支持，例如某些display: grid的高级特性，会使得布局失效。
3. flex布局下的兼容差异
在flex容器中，如果子div没有设置flex-shrink或min-width，Edge可能将其宽度计算为0。
如何排查并解决
建议先打开Edge的开发者工具，查看该div的盒模型，确认其是否被隐藏、宽高是否为0。以下是几个常见修复方案。
修复高度塌陷
可以给父容器添加清除浮动或设置最小高度：
/* 父容器清除浮动 */
.parent::after {
content: "";
display: block;
clear: both;
}
/* 或者给父容器一个最小高度 */
.parent {
min-height: 100px;
}
为flex子项设置基础宽度
.flex-container {
display: flex;
}
.flex-item {
flex-shrink: 0;
min-width: 200px;
}
避免使用不被支持的属性
如果必须使用grid，可以添加兼容前缀或降级方案：
.box {
display: -ms-grid;
display: grid;
-ms-grid-columns: 100px 100px;
grid-template-columns: 100px 100px;
}
总结
Edge中div不显示多数情况下是布局计算差异引起的。通过开发者工具检查盒模型、注意浮动与flex的兼容写法，就能有效解决这类问题。