CSS Grid动态内容换行致布局塌陷的解决方案选型

CSS方案的浏览器兼容性 #

设置.easy-columns br { display: none; }的方案是全浏览器兼容的——不管Chrome、Firefox、Safari这类现代浏览器，还是IE8及以上的旧版本浏览器，都能正常识别并生效，并非仅测试环境有效。

两种方案的选择分析 #

CSS隐藏方案 #

• 优势：实现成本极低，无需修改后端的BB-Code转HTML逻辑，仅需添加一行CSS规则即可解决布局问题；同时不会改动原始HTML结构，若后续有其他场景需要保留这些<br>标签（比如移动端调整布局时），只需修改CSS就能快速适配。
• 劣势：HTML中仍会存在多余的<br>标签，虽然不影响视觉，但会造成少量DOM冗余，不过这种冗余对性能几乎无影响。

PHP DOMDocument移除方案 #

• 优势：从根源上清除了多余的<br>标签，DOM结构更干净，不存在冗余元素，适合对HTML纯净度有要求的场景（比如SEO优化、后续需要基于干净DOM做复杂前端逻辑的情况）。
• 劣势：需要修改后端的BB-Code转换逻辑，涉及DOM节点操作，还要考虑边界情况（比如<br>是否直接作为.easy-columns的子元素，嵌套在其他标签内的<br>是否需要保留等），维护成本更高。

建议 #

如果只是单纯解决网格布局塌陷的问题，优先选择CSS方案，高效且无额外维护成本；如果你的业务对DOM结构的纯净度有明确要求，再考虑使用PHP移除的方案。

内容的提问来源于stack exchange，提问作者Alexander Galler