静态柱状图用模拟柱子、CSS控制宽高，本质是语义缺失的视觉占位；需用百分比控高、flex布局、aria-label增强可访问性，IE11需避免calc()混用单位并预计算高度。

HTML 本身不画图，所谓“静态柱状图”只是用 <div> 模拟柱子、靠 CSS 控制宽度和颜色，本质是语义缺失的视觉占位——它不能响应数据变化，也不具备可访问性，更没法导出或缩放。<h3>为什么不用 <code><canvas></canvas> 或 <svg></svg>？

因为你要的是“静态”“纯 HTML/CSS”方案，可能受限于环境（比如邮件模板、CMS 富文本编辑器、老系统只允许内联样式）。<canvas></canvas> 需要 JS 渲染，<svg></svg> 虽然静态但结构稍重，而 <div> 布局最轻量、兼容性最好（IE8+ 都能撑住）。<p>常见错误现象：<br>– 柱子高度用 <code>px 写死 → 数据一变就全错
– 用 float 排列 → 父容器塌陷、换行错乱
– 忘加 aria-label → 屏幕阅读器读不出数值

• 用百分比控制柱高（以最大频次为 100% 基准）
• 父容器设 display: flex 或 display: inline-block 避免浮动陷阱
• 每个柱子加 role="region" 和 aria-label="85–90 分：12 人"

width 和 height 怎么算才不踩坑？

成绩分布图的关键不是“画得像”，而是“比例对”。比如区间 [60–69] 有 8 人，[70–79] 有 24 人，那后者柱子高度必须是前者的 3 倍——否则就是误导。

立即学习“前端免费学习笔记（深入）”；

使用场景：后台导出 HTML 报表、嵌入内部 Wiki、生成 PDF 快照（用 wkhtmltopdf）

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 先遍历数据，找出最大计数 maxCount
• 每个柱子 height: calc(100px * count / maxCount)（100px 是基准高度，可调）
• 区间标签文字用 font-size: 0.8em，避免小屏溢出
• 别用 vh 单位——打印时会失效

怎么让 IE11 也显示正常？

IE11 不支持 calc() 在 height 里混用单位（如 calc(100px * 12 / 36)），会直接忽略整条样式。这是最常被忽略的兼容性断点。

性能影响：纯 CSS 柱状图无渲染延迟，但超过 20 个区间时，IE11 的重排开销明显上升

• 服务端提前算好比例值，输出固定 height: 33.33% 这类静态值
• 用 zoom: 1 触发 IE hasLayout，防高度塌陷
• 避免在柱子上用 box-shadow 或 border-radius —— IE11 渲染模糊

真正麻烦的不是画柱子，而是“怎么让人相信这图没造假”：区间边界是否闭合（[60,70) 还是 [60,70]）、空区间要不要留空位、分数四舍五入规则有没有写进图例——这些都得靠文字说明补全，不能指望柱子自己说话。