生效，但仅控制整体容器高度；需配合appearance: none才能稳定生效，否则Firefox/Safari可能忽略height，且iOS Safari有约8px最小高度限制。
progress标签的height属性在Chrome/Firefox/Edge中是否生效？
生效，但仅作为“整体容器高度”，不是填充块高度。直接写height: 12px能压扁整个进度条（轨道+填充），但Firefox下若未加appearance: none，height可能被忽略或部分失效。
常见错误现象：只设height没加appearance: none，Safari里高度不变；或写了height却发现填充色区域比轨道还细——那是::-webkit-progress-value的background-color没填满导致的视觉错觉。
-
height控制的是<progress>元素自身盒模型高度，所有浏览器都支持 - Firefox 100+ 和 Safari 16.4+ 要求必须配合
appearance: none才能让height稳定生效 - IE11 已不推荐支持，其
height行为不可靠，建议用transform: scaleY()降级兜底
为什么appearance: none是强制高度的前提？
因为<progress>默认是操作系统原生控件（如 macOS 的 NSProgressIndicator、Windows 的 Theme-based ProgressBar），浏览器会绕过 CSS 盒模型直接调用系统渲染逻辑。appearance: none就是告诉浏览器：“别画系统控件了，交给我用 CSS 控制”。
不加它，WebKit 内核下height可能被无视；Firefox 下即使写了height，::-moz-progress-bar仍按系统默认高度渲染，导致填充块上下留白。
立即学习“前端免费学习笔记（深入）”；
- 必须同时写三套：
-webkit-appearance: none、-moz-appearance: none、appearance: none - 某些 CSS 重置库（如 modern-normalize）会悄悄重置
appearance，需检查getComputedStyle(el).appearance确认值是否为none - 加了
appearance: none后，border、border-radius、overflow: hidden才真正可控
如何让进度条变细且两端圆润（如 height: 6px + border-radius: 3px）？
不能只靠height和border-radius——WebKit 下填充块（::-webkit-progress-value）默认有内边距，会撑开圆角；Firefox 下::-moz-progress-bar不响应border-radius，得靠父容器裁切。
实操方案是：用height定总高，再用overflow: hidden + border-radius包裹一层，让填充块溢出部分被裁掉，视觉上就“变细又圆润”了。
- 外层容器加
overflow: hidden和border-radius，内部<progress>设height略大于容器（如容器height: 6px，progress 设height: 8px） - 或直接对
<progress>设height: 6px+border-radius: 3px+overflow: hidden（Chrome/Safari 有效，Firefox 需额外加line-height: 0防文字基线干扰） - 不要对
::-webkit-progress-value设height或margin——这些属性无效，强行写会导致渲染异常
移动端 Safari（iOS 17+）对height的特殊限制
iOS Safari 对<progress>的最小高度有隐式下限（约 8px），设height: 4px会被自动拉高到 8px，且不报错、不警告。这不是 bug，是 WebKit 为可访问性做的保护：太细的进度条不利于触控反馈和屏幕阅读器识别。
如果你真需要超细进度条（比如仪表盘小图标旁），唯一可靠方案是放弃<progress>，改用<div role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"> + CSS 动画模拟，这样高度完全可控，也符合 WCAG 2.1 AA 标准。
- 测试方法：在 iOS 真机打开
devtools → Elements → 查看 computed height，对比设置值与实际值 - 不要依赖
transform: scaleY(0.5)强行压缩——会破坏可访问性语义，屏幕阅读器仍读“30%”，但视觉只剩一半高 - 若必须用原生
<progress>，建议最低设height: 8px，并接受 Safari 的这个“善意干预”
