html气泡需防范xss：仅允许白名单标签（strong、em、br、a且href限https?），禁用script等执行类标签及on事件；时间戳应作为子元素用margin微调对齐，禁用绝对定位；safari需用js而非:hover控制提示；z-index、伪元素定位、scrollheight计算是跨端兼容关键。
HTML气泡本身不校验内容，但实际用在消息提示场景时，innerHTML 插入未转义的用户输入会直接触发 XSS；必须做 HTML 实体转义或使用 textContent 渲染纯文本。
气泡内容是否允许 HTML 标签
允许，但有明确边界：
- 仅限白名单标签：
<strong></strong>、<em></em>、<br>、<a></a>（需限制href协议为https?） - 禁止执行类标签：
<script></script>、<iframe></iframe>、<object></object>、<embed></embed> - 禁止内联事件：
onclick、onmouseover等属性一律剥离 - 若用
v-html（Vue）或dangerouslySetInnerHTML（React），必须前置 sanitize 处理，不能直接透传原始字符串
时间戳和消息体混排导致错位
常见于把时间戳写成 <span class="timestamp">10:23</span> 并用 position: absolute 定位——一旦气泡高度动态变化（比如换行、图片加载），绝对定位就脱离文档流，时间戳会悬空或重叠。
正确做法是：
- 时间戳作为气泡内部最后一个子元素，用
margin-top: 4px+font-size: 0.75em微调位置 - 对齐方式与气泡一致：
.mine .timestamp加text-align: right，.theirs .timestamp加text-align: left - 避免给时间戳设
position或top/right偏移
移动端 Safari 气泡弹出后点击无响应
不是代码逻辑问题，而是 Safari 对 :hover 的特殊处理：真机上没有“悬停”概念，mouseenter 不触发，只响应 click 或 touchstart。
适配要点：
- 不要依赖
.tooltip:hover .tooltiptext这类纯 CSS 悬停方案 - 改用 JS 控制显隐：
element.addEventListener('click', toggleTooltip) - 加
cursor: pointer提示可点，避免用户误以为不可交互 - 若需兼容 hover+click 双模式，得用
matchMedia('(hover: hover)')动态判断设备能力
真正难的不是画出三角箭头或圆角，而是所有气泡共用一套 DOM 结构和样式规则时，z-index 层级、伪元素定位偏移、滚动容器 scrollHeight 计算时机这三处，稍一松懈就会在 iOS 或低配安卓机上集体失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
