IE8不兼容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哈哈~

猜你喜欢

转载自blog.csdn.net/hmbb222/article/details/86288461
今日推荐