css border-radius兼容ie8

it2025-12-17  10

ie8不兼容 css3

查询兼容性链接:(https://caniuse.com/) 如常用的border-radius,box-shadow, linear-gradient 在ie8中没有效果

可以用pie解决ie8不兼容css3的问题 pie下载链接:(http://css3pie.com/)

使用方法:

<div class="test-box"> test content </div> .test-box{ margin: 30px; width: 120px; height: 100px; line-height: 100px; text-align: center; border-radius: 6px; -moz-box-shadow: 0 0 6px 0 #999999; -webkit-box-shadow: 0 0 6px 0 #999999; box-shadow: 0 0 6px 0 #999999; background-image: -moz-linear-gradient(left, #37b3e3, #e3ce37); background-image: -webkit-linear-gradient(to right, #37b3e3, #e3ce37); background-image: linear-gradient(to right, #37b3e3, #e3ce37); -pie-background: linear-gradient(left, #37b3e3, #e3ce37); background: linear-gradient(to right, #37b3e3, #e3ce37); behavior: url(/css/PIE.htc); }

注:使用时pie文件的路径是html的相对路径,若pie文件与css文件在同一目录,html文件在根目录,则路径为 url(/css/PIE.htc)

ie8浏览器展示效果 加behavior之前: 加behavior之后:

最新回复(0)