border-radius 在 IE8 及以下版本原生不支持,加任何前缀均无效;IE9+ 支持标准属性但需确保文档模式为 IE9+,且不支持椭圆弧、inherit 等高级写法。

IE8 及更早版本根本不支持 border-radius
直接说结论:border-radius 在 IE8 及以下版本是原生不支持的,加任何前缀(比如 -webkit-border-radius、-moz-border-radius)都无效。IE9 开始才支持标准属性,且无需前缀。所以如果你的项目必须兼容 IE8,就别指望纯 CSS 圆角了。
IE9+ 可以用标准 border-radius,但要注意文档模式
即使在 IE9 或 IE10,如果页面触发了兼容性视图(比如服务器返回了 X-UA-Compatible: IE=EmulateIE7,或 HTML 里漏了 ),浏览器仍会降级到 IE7 模式,此时 border-radius 就会静默失效。
- 确保
中最顶部有: - 检查响应头是否意外设置了
X-UA-Compatible: IE=7等值 - 用开发者工具(F12)的“仿真”标签页确认文档模式确实是 IE9+,而不是“IE8 标准模式”或更低
IE8 圆角只能靠降级方案,不是加前缀能解决的
所谓“前缀兼容”对 IE8 是伪命题。真正可行的方案只有几个,且都有明显代价:
- 用
PIE.js(已停止维护):通过 HTC 行为注入 VML 绘制圆角,但会阻塞渲染、影响性能,且与现代构建工具(如 Webpack)集成困难 - 切图替代:把圆角区域做成带透明度的 PNG 背景图,适用于静态、尺寸固定的元素
- 接受降级:对 IE8 用户显示直角,用
@supports或条件注释隔离样式(推荐):
border-radius 的写法本身也会影响 IE9+ 兼容性
IE9 支持基础语法,但不支持某些高级写法,容易被忽略:
立即学习“前端免费学习笔记(深入)”;
- 不支持单侧缩写,比如
border-top-left-radius: 5px 10px(椭圆弧)在 IE9 是无效的,只认单值5px - 不支持
inherit或unset作为border-radius的值 - 百分比值在 table 元素上表现不稳定,建议对
、 等用固定像素值 - 避免和
IE8 的圆角问题本质是渲染引擎限制,不是漏写前缀或语法错误。真正要落地,得先明确「是否真需支持 IE8」——很多所谓“兼容需求”,其实只是没推动业务方更新兼容策略。overflow: hidden+transform同时使用,IE9 渲染可能错位 - 避免和










