半透明的圆角矩形实现IE浏览器兼容

最新推荐文章于 2025-10-27 05:58:10 发布

原创

最新推荐文章于 2025-10-27 05:58:10 发布 · 2k 阅读

标签

#浏览器 #web开发 #ie9 #filter #前端

本文探讨了如何在IE9浏览器中实现半透明圆角矩形的兼容性。由于IE8及以下仅支持filter属性，而IE9开始支持css3的opacity和filter，但filter会导致圆角透明，因此需要针对IE9进行特定的hack处理。通过调整CSS代码，既能实现半透明效果，又能保持圆角不被影响。对于IE10及更高版本，可以使用rgba()来实现透明效果。

虽说IE浏览器令web开发者唾弃，而且有点不符合时代的潮流，但是只要有人在用IE浏览器，作为web开发者的我们就要硬着头皮上，去解决他的兼容问题。我本人不仅不觉得天天去调浏览器兼容无趣，反而觉得这个是我生活的一部分，作为一个前端应该具备的能力。

大家都知道圆角是css3的新属性，跟透明属性opacity一样，他们只支持到IE9。而IE滤镜filter支持4到9。IE10及以上不识别filter。所以给一个半透明蓝色的圆角div同时设置opacity属性和filter属性，我们暂且不处理IE8下的圆角失效问题。

IE8及以下自动屏蔽掉opacity属性、只识别filter属性，

实现半透明蓝色的代码：

background: rgba(0, 0, 0, 0.12);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000);

这段代码中rgba的0.12代表了opacity透明度，就不会被识别。

关于这个滤镜代码的含义可以查看我的另一篇博客--《滤镜filter的用法》

IE9对opacity和filter属性都识别，

最低0.47元/天解锁文章