ie9以下浏览器不兼容css3圆角属性的解决办法

众所周知,ie8以下浏览器过于陈旧,无法兼容css3众多属性,其中一个就是前端比较常用的圆角属性。下面是本人解决这个问题的过程。首先要准备PIE.htc和PIE_IE678.js这两个文件(很多博主讲的是准备这两个其中一个,然后根据引用的不同文件有不同的引用方法,但是经过本人反复试验,我的项目中必须要引用两个文件才会有效。所以如果你也是引用一个怎么都解决不了问题时,我的博客或许对你有用O(∩_∩)O)

1.下载PIE.htc和PIE_IE678.js这两个文件

2.将上述文件放入项目合适的位置

3.在页面中引用上述文件

  • 引用PIE_IE678.js,在页面中写入下面代码即可,意思是如果浏览器版本在ie9以下,则会引用PIE_IE678.js文件
<!--[if lt IE 9]>
<script type="text/javascript" src="${ctxStatic}/test/js/PIE_IE678.js"></script>
<![endif]-->
  • 引用PIE.htc(分为内联样式和外联样式两种,主要是路径写法不同)

1.内联样式

behavior: url(${ctxStatic}/test/js/PIE.htc);
position:relative;
border-radius: 0 23px 23px 0;

2.外联样式

behavior: url(/testWeb/static/test/js/PIE.htc);
position:relative;
border-radius: 0 23px 23px 0;

完成以上对两个文件的引用,用ie8打开设置圆角的页面,圆角就会出现了O(∩_∩)O哈哈~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值