hr高度控制必须配合border或background-color才能稳定生效；仅设height在firefox和旧safari中可能不显示，因浏览器渲染逻辑差异大，推荐统一用border-top实现，如hr{border:none;border-top:1px solid #ccc;height:0;}。
hr 的高度控制不能只靠 height，必须配合 border 或 background-color 才能稳定生效；直接写 height: 3px 在 Firefox 和旧 Safari 中可能完全不显示。
为什么 height 单独设无效
浏览器对 hr 的渲染逻辑差异很大：
- IE 系列：依赖
color控制线色，height仅影响“边框区域”，实际线宽由border决定 - Firefox / Safari：忽略
color，只认background-color，且必须搭配显式height才能撑开内容区 - Opera（含旧版 Chromium）：
height不设则默认为 2px，但若同时写了border，又可能被覆盖或叠加
所以只写 height: 2px 是最常见失效原因——它没告诉浏览器“这根线到底用什么画出来”。
hr 高度必须靠 border 还是 background
推荐统一用 border-top 实现细线控制，理由很实际：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
border-top: 2px solid #666在所有现代浏览器中渲染一致，无需额外 hack - 避免
background-color+height组合在缩放或高 DPI 屏幕下出现模糊、发虚 - 支持
dashed、dotted、double等线型，background只能做实色块 - 可单独加
border-radius做圆角横线，background方案得套容器才能实现
示例写法：
hr { border: none; border-top: 1px solid #ccc; height: 0; }——height: 0 是关键，它清空默认内容区，让 border-top 成为唯一视觉来源。
border 设置时最容易漏掉的三个点
哪怕你写了 border-top: 2px solid red，以下三点漏一个，线就可能消失或错位：
- 没写
border: none：各浏览器对hr的默认border解析不同（Chrome 默认border-top: medium solid gray），不先清空会导致双线、粗细叠加 - 没设
margin：hr默认上下 margin 较大（约 1em），和文字间距不协调，建议显式写margin: 16px auto - 没处理
box-sizing：如果父容器用了box-sizing: border-box，而hr没继承，某些布局中会因边框占位导致换行或偏移；稳妥起见可加box-sizing: content-box
响应式场景下怎么安全调高度
不要对 hr 直接写 height: 2px 或 border-top: 2px solid 做媒体查询切换，因为：
- 像素值在 Retina 屏上会变细（1px 实际渲染为 0.5px），视觉上断续
- 小屏幕下固定 2px 可能太抢眼，大屏下又显得单薄
- 更可靠的方式是用
rem或em控制相对粗细：border-top: 0.125rem solid #999（即 2px @16px base） - 真要适配，优先改颜色和 margin，而非死磕高度——人眼对粗细变化远不如对间距和灰度敏感
复杂点在于：你永远不知道设计师给的“1px 分割线”到底指物理像素、CSS 像素，还是视觉权重。上线前务必在 iOS Safari、Chrome Android、Windows Edge 上实机测一遍渲染效果，别信开发工具的模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
