最稳纯CSS画×符号需父容器设position: relative，两个伪元素用content: ""、display: block、宽高一致、transform-origin: 50% 50%、分别旋转45deg和-45deg，并注意IE11兼容性与层叠上下文问题。
用 ::before 和 ::after 画 × 符号最稳
纯 CSS 画关闭叉，不用图片、不用 SVG，就靠两个伪元素旋转拼出交叉线。关键不是“怎么画”，而是“怎么对齐不偏移”——很多人的 ::before 和 ::after 一转就飘了，是因为没重置 transform-origin 或忘了设 position: absolute。
实操建议：
- 父容器必须设
position: relative，否则伪元素会相对 body 定位 - 两个伪元素都用
content: ""，宽高一致（比如16px × 2px），背景色填实 - 统一设
transform-origin: center，再分别旋转45deg和-45deg - 避免用
top: 50%; left: 50%+translate(-50%, -50%)居中——小尺寸下像素对齐容易糊，直接用top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg)更准
IE11 下 transform 不生效？补 -ms- 前缀没用
IE11 支持标准 transform，但不支持 transform-origin: center 的简写形式。写成 transform-origin: 50% 50% 才能生效，否则两条线会绕左上角转，完全错位。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 在 IE11 里 × 变成一个斜杠加一个点（一条线正常转，另一条原地不动）
- 伪元素明明写了
width/height，却渲染成 0 —— 因为 IE11 对content: ""的块级伪元素要求显式设display: block - 如果父容器用了
font-size: 0清空间隙，IE11 会把伪元素也缩成不可见，得单独给伪元素设font-size: 16px
响应式场景下叉号变形？别用固定像素宽高
移动端适配时，硬写 width: 16px; height: 2px 容易在高清屏上发虚，或在小按钮里撑不开。更可靠的方式是用 em 或 rem 挂钩父级字号。
使用场景：
- 关闭按钮本身是
1.2rem高，那伪元素宽高就设成1.2rem × 0.1rem，粗细随字号缩放 - 想保持线条粗细绝对一致（比如始终 2px），就用
min-width: 2px+width: max(2px, 0.125rem)（需支持max()的浏览器） - 旋转后边缘锯齿明显？加
transform: translateZ(0)或backface-visibility: hidden强制 GPU 加速，尤其 iOS Safari 上有效
::before 和 ::after 被其他样式覆盖？检查层叠上下文
有时叉号只显示一条线，或者干脆不显示，不是代码写错了，而是父容器触发了层叠上下文（比如有 opacity < 1、filter、transform），导致伪元素被裁剪或压在底层。
排查要点：
- 用浏览器开发者工具选中伪元素，看
Computed里display是不是none，content是否为空 - 检查父元素有没有
overflow: hidden且没留足够内边距——两条线旋转后实际占位比原始尺寸大，容易被切掉 - 如果按钮用了
background: linear-gradient，某些旧版 Chrome 会把伪元素渲染在渐变层下面，加position: relative; z-index: 1到伪元素上
真正麻烦的不是画叉，是它在不同缩放、不同设备像素比、不同层叠规则下保持形状稳定。多测 125% 缩放和 iPhone SE 的 320px 宽度，比写十行 CSS 都管用。
