首页 > 代码库 > 关于IE浏览器不支持border-radius,box-shadow,text-shadow的解决方法

关于IE浏览器不支持border-radius,box-shadow,text-shadow的解决方法

1,首先需要下载ie-css3.htc

2,需要引用ie-css3.htc

使用演示:

.main{ 

border: 2px solid #C0C0C0;

-moz-border-radius: 10px; 

-webkit-border-radius: 10px; 

border-radius: 10px; 

position:relative; 

z-index:100; 

behavior: url(此处为ie-css3.htc文件的绝对路径);

}

使用ie-css3.htc所遇到的bug:

      第一,被使用层加上去后背景颜色就是background-color属性不见了,这种情况大多数是因为被使用层一开始是属于隐藏状态(display:none)下。比如弹窗之类的层,一开始是隐藏的,后来想让他显示,然后发现显示后加了ie-css3.htc就会不显示背景,就是这种情况造成的。

  解决办法:不要用display:none这种方法去隐藏层,也不要用相对屏幕fixed的方式隐藏他(这种方法会导致背景和层不在一个位置),大家可以在默认状态下让层是显示的,然后在页面加载完所有代码后,用js隐藏,这段js一定要写在ie-css3.htc对该层渲染后,也就是说,ie-css3.htc这个文件对于已经渲染过的层,你可以随意去进行显示和隐藏就不会有bug了。

  第二种,这个方法不能加background-image,应该说是不能在一个对象上使用,但是大家可以在该对象里的一个层里使用该属性。

关于IE浏览器不支持border-radius,box-shadow,text-shadow的解决方法