ie8及以下不支持border-radius，因trident 4.0引擎未实现该特性；ie9+需满足文档模式为ie9+且meta声明正确；兼容ie8唯一可行方案是pie.htc，但要求路径正确、position:relative、非inline显示等严格条件。
border-radius 在 IE8 及以下版本原生不支持，加任何前缀（-webkit-border-radius、-moz-border-radius、甚至 -ms-border-radius）都无效——这不是写法问题，是 Trident 4.0 渲染引擎根本没实现该特性。
IE9+ 才真正支持 border-radius，但必须满足两个硬条件
IE9 开始支持标准 border-radius，但极易因环境配置失败：
- 文档模式必须为 IE9 或更高：检查
<meta http-equiv="X-UA-Compatible" content="IE=edge">是否存在，且位于最顶部；若被 JS 动态插入或位置靠后，会失效 - 不要混用条件注释加载旧版 Polyfill（如 PIE.js）和标准 CSS，否则可能触发冲突或重复渲染
- IE9 兼容模式（如企业内网强制降级）下，即使写了
IE=edge也可能被忽略——需确认实际运行的文档模式（F12 → “文档模式”标签页）
真要兼容 IE8？PIE.htc 是唯一还能跑的方案，但路径和样式缺一不可
PIE.htc 不是“引入就生效”，它对 DOM 结构和 CSS 属性极其敏感：
-
behavior: url(PIE.htc)中的路径是相对于 HTML 文件的，不是 CSS 文件——常见错误是写成url(/css/PIE.htc)却把文件放在./pie/下 - 目标元素必须有
position: relative（或absolute、fixed），否则 PIE 无法定位 VML 覆盖层 - 不能是
display: inline，至少得是block或inline-block - 父容器不能设
overflow: hidden，否则会裁掉 PIE 绘制的 VML 节点 - HTTPS 页面下，
PIE.htc必须也走 HTTPS 加载，且服务器需返回X-Content-Type-Options: nosniff和 MIME 类型text/x-component
JS 动态修改 border-radius 后 PIE 不会自动响应
PIE 不监听 CSS 属性变化，改完 borderRadius 后它完全不知情：
- 手动触发重绘：改样式后立即调用
PIE.detach(element)，再调用PIE.attach(element) - 避免高频操作——每帧都
detach/attach会导致卡顿，只在关键交互（如点击切换类名）后刷新 - 若用 jQuery 修改，注意
$(el).css('border-radius', '50%')不会触发 PIE 重绘，仍需手动PIE调用
现在还硬扛 IE8 的项目极少，PIE 已归档多年，维护成本远高于收益。真正要做的，是确认业务是否真需要兼容——比如内网系统升级浏览器是否可行，或者能否用渐进增强（圆角作为锦上添花，非核心功能）替代强行兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
