ruby被css重置“干掉”是因为重置规则误伤其隐式渲染流：*{line-height:1}压缩行高致rt裁切，vertical-align:middle破坏基线对齐，display:inline-block切断内联流；应仅针对性设置ruby{display:ruby}、rt{font-size:12px;line-height:1;vertical-align:text-top}并隐藏rp。
ruby标签为什么会被CSS重置“干掉”
很多项目一上CSS重置（比如 * { margin: 0; padding: 0; } 或 Normalize.css），ruby 就开始错位、缩放异常甚至完全不显示注音——不是浏览器bug，是重置规则误伤了 ruby 的默认渲染流。浏览器对 ruby 的排版依赖一组隐式内联行为：它需要自然的 line-height、默认的 vertical-align 和未被干扰的基线计算。而重置常把 line-height 设为 normal 或 1，又把所有内联元素的 vertical-align 拉平，结果就是 rt 悬空、压扁或贴着基字右下角。
哪些重置规则会直接破坏ruby布局
以下几类常见重置写法，在 ruby 场景中需特别警惕：
-
* { line-height: 1; }—— 强制压缩行高，导致rt被裁切或与基字重叠 -
img, input, button, textarea, select, ruby { vertical-align: middle; }—— 把ruby当普通内联元素处理，破坏其语义化基线对齐逻辑 -
body { font-size: 16px; }后未重置rt字号，导致不同浏览器下rt相对大小严重不一致（Chrome按父级算，Safari按根字体） -
ruby { display: inline-block; }—— 这是最隐蔽的坑：看似能控制尺寸，实则切断ruby的内联流，引发换行脱节、间距异常，且 Safari 会直接忽略该声明
安全重置ruby的最小必要样式
不要试图用通配符“清空一切”，而是只覆盖真正影响 ruby 渲染的关键属性。推荐在重置之后立即补上这段防御性样式：
ruby {
display: ruby;
}
ruby rt {
font-size: 12px;
line-height: 1;
vertical-align: text-top;
text-align: center;
}
ruby rt rp {
display: none !important;
}
说明：
-
display: ruby是强制现代浏览器识别语义容器的兜底手段，尤其对 Safari 17+ 必须显式声明 -
font-size用固定像素而非百分比/ems，避免跨浏览器计算偏差 -
vertical-align: text-top比super更稳定，不会随行高浮动偏移 -
rp必须用!important隐藏，否则 Chrome 会把它当可见内容渲染
和BEM等命名规范混用时的陷阱
如果项目用 BEM（如 .text_pinyin 包裹 ruby），注意别让修饰符样式意外污染内部结构：
- 禁止写
.text_pinyin ruby { font-size: 14px; }—— 会放大整个ruby容器，导致rt相对失真 - 禁止在父级加
white-space: nowrap后，再对单个ruby做display: inline-flex—— 破坏内联流，iOS Safari 上注音会集体右移 - 若用
<bdi></bdi>隔离多语言方向，确保bdi不被 BEM 类名的direction或unicode-bidi覆盖
最易被忽略的是：重置生效顺序。如果 Normalize.css 在前、你的 ruby 样式在后，但又被某个全局 .content * 选择器二次覆盖，问题就藏得极深——务必用浏览器开发者工具逐层检查 computed styles 中 ruby 和 rt 的最终 line-height 与 vertical-align 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
