border-radius在ie8及更早版本完全不生效，因其trident 4.0引擎未实现css3解析逻辑，加任何前缀均无效；ie9起才原生支持，但需确保文档模式为ie9+。
IE8 及更早版本根本不解析 border-radius，写再多前缀也没用——必须靠外部脚本补全能力，否则圆角就是纯装饰性失效。
为什么 border-radius 在 IE8 里完全不生效
IE8 的 Trident 渲染引擎压根没实现 CSS3 的圆角解析逻辑，-moz-border-radius 和 -webkit-border-radius 对它无效，border-radius 本身也被忽略。这不是“兼容性差”，是“功能缺失”。你看到的方块按钮不是渲染异常，是浏览器根本没读那行样式。
- IE9 开始原生支持
border-radius，但 IE8 及以下必须靠.htc行为文件模拟 - 所有前缀（
-moz-、-webkit-）在 IE8 中都是无意义字符串，不会触发任何 fallback - 即使加了
position: relative或z-index，也不影响解析结果——没解析，就谈不上渲染
用 ie-css3.htc 实现 IE8 圆角的关键配置
这个脚本通过 VML 动态绘制圆角，但极易因路径或上下文错配而静默失败。
-
behavior: url(ie-css3.htc)中的路径必须是绝对路径（如/static/js/ie-css3.htc），相对路径在动态页面中常 404 - 目标元素必须有
position: relative（或absolute），否则 VML 层无法正确定位 - 建议显式设置
z-index: 1或更高，避免被其他元素遮盖（VML 绘制层默认 z-index 较低） - 不要把
behavior写在通用重置样式里——只加在真正需要圆角的 class 上，否则拖慢 IE8 渲染
示例：
.btn-round {
border-radius: 6px;
position: relative;
z-index: 2;
behavior: url(/js/ie-css3.htc);
}
IE8 下按钮圆角常见的视觉陷阱
即使脚本加载成功，按钮仍可能“看起来没圆角”，原因往往和布局、盒模型有关。
-
<input type="button">和<button></button>默认box-sizing不一致，IE8 下 padding 计算易出偏差，导致圆角被裁切 - 父容器设了
overflow: hidden，而按钮内容撑高后超出，圆角部分被剪掉（IE8 对 overflow 处理更严格） - 按钮背景色或边框太浅，与页面底色接近，造成“圆角存在但看不出来”的错觉
- 未设置明确的
width和height，IE8 下内联元素尺寸计算不稳定，border-radius应用基准模糊
比 ie-css3.htc 更轻量的替代方案
如果你只需要简单圆角且不想引入额外 HTTP 请求，可用纯 CSS hack 替代：
- 对 IE8 用
background-image拼接四个圆角 PNG（左上、右上、右下、左下），配合padding预留空间 - 用
filter: progid:DXImageTransform.Microsoft.gradient模拟渐变+圆角组合效果（仅限背景） - 放弃 IE8 圆角，用
*border-radius: 0（IE6/7 hack）强制降级为直角，保持结构稳定
注意：PIE.htc 虽功能更强（支持阴影、渐变），但体积大、兼容性更脆，调试成本高于 ie-css3.htc；而 SVG/CSS Canvas 方案在 IE8 中需额外 polyfill，实际落地成本更高。
真正难的不是让圆角出现，而是让同一段代码在 IE8 和现代浏览器里都按预期渲染——behavior 路径、定位上下文、溢出控制，三者缺一不可。漏掉任意一个，圆角就只是开发者眼中的幻觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
