浏览器兼容性问题源于解析与渲染逻辑差异：IE8需html5shiv支持HTML5标签；Safari14–15的Flex布局存在min-width计算bug；pre标签失效多因CSS覆盖white-space；textarea换行符应统一用.value操作。
不是你的 HTML 写错了，而是浏览器对同一段代码的解析和渲染逻辑天然不同——这是 Web 开发的常态，不是异常。
HTML5 结构标签在旧版 IE 里直接不显示
Chrome、Firefox、Safari 都能正常识别 、 这些标签，但 IE8 及更早版本会把它们当“未知元素”，既不渲染，也不继承样式，结果就是整块内容消失或错位。
- 仅加
display: block不起作用——IE8 的 DOM 根本不认识这些标签名，CSS 规则压根不匹配 - 必须配合
html5shiv让 IE 知道这些是合法标签：<!--[if lt IE 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
- 脚本必须放在所有 CSS 之前加载，否则样式规则可能被跳过
Flex 布局在 Safari 14–15 里子项莫名换行或撑破容器
Safari 14–15 对 display: flex 容器中子元素的 min-width 计算有 bug，尤其遇到图片、 或设置了 width: 100% 的元素时，会错误地阻止收缩，导致折行或溢出。
- 给 flex 子项显式加
min-width: 0（适用于文本/可收缩内容）或min-width: fit-content（适用于内联块） - 避免在 flex 容器上同时写
flex-wrap: wrap和width: 100%，改用max-width: 100% - 别依赖 Safari 自动推断收缩边界——它在这两个版本里推断错了
pre 标签格式失效，不是 HTML 问题，是 CSS 干扰
本该原样保留空格与换行，但在 Chrome 显示正常、Firefox/Safari 却变单行，大概率是 CSS 覆盖了关键行为。
- 检查是否意外设置了
white-space: normal或font-family不一致（等宽字体缺失会影响换行判定） -
white-space: pre和white-space: pre-wrap行为不同：前者强制不折行，后者允许折行但保留空格；移动端 Safari 对pre-wrap支持略滞后 - 父容器若设了
overflow: hidden或text-overflow: ellipsis，也会静默截断内容
textarea 换行符在不同浏览器里存成一行
用 innerHTML 读写 是最常见陷阱：Chrome 返回 \r\n，Firefox 返回 \n，Safari 可能混用。后端一存一读，所有换行就没了。
- 必须用
.value读取和设置内容，这是标准且跨浏览器一致的接口 - 不要在 JS 中手动替换
\r\n→\n，因为用户粘贴进来的原始换行可能已是\n - 如果要预填充，用
textarea.value = "第一行\n第二行"，而不是textarea.innerHTML = "第一行\n第二行"
真正难调的往往不是“整个块不见了”，而是 margin 折叠方式不同、flex 子项收缩阈值不一致、甚至 document.body.scrollTop 在 Firefox 里永远是 0 这类隐性差异——得盯着 DevTools 的 Computed 和 Layout 面板逐项比对，不能只看页面“长什么样”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
