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">是否存在,且位于<head>最顶部;若被 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 已归档多年,维护成本远高于收益。真正要做的,是确认业务是否真需要兼容——比如内网系统升级浏览器是否可行,或者能否用渐进增强(圆角作为锦上添花,非核心功能)替代强行兜底。


















