html5中的progress兼容ie，制作进度条样式

html5新增的progress标签用处很大，它可以制作进度条，不用像以前那样用css来制作进度条！

    

 

    一、progress使用方法

    progress标签很好使用，他有两个属性，value和max，value表示当前进度而max表示总进度（一般可以用100）

1	< progress  value = "50"  max = "100" ></ progress >

 

    二、progress如何兼容ie浏览器

    用过progress标签的肯定知道，这个标签虽然好用但是不兼容ie浏览器，所以今天给大家说说如果兼容ie浏览器！我们首先用js添加progress和ie标签，因为他们在ie浏览器中不能被识别，然后我们就css将他们做成进度条就可以啦！具体看一下代码！

    html代码

1 2 3

< progress  id = "progress"  value = "1"  max = "100" >      < ie  id = "ie" ></ ie > </ progress >

    

    css代码

1 2 3 4 5 6 7 8 9 10 11 12 13

progress::-webkit-progress-bar {  background :  #ccc ; } progress::-webkit-progress-value  {  background :  blue ; } progress {      display : block ;      width : 162px ;      background : #ccc ; } ie {      height : 100% ;      width : 0% ;      display : block ;      background : blue ; }

 

    js代码

1 2	document.createElement( 'progress' ); document.createElement( 'ie' );

 

    这样就能实现progress标签在所有浏览器中都兼容啦，这里还有兼容所有浏览器的页面加载进度条实例，有兴趣的可以看看！

想要每天及时获取王业楼的个人博客更新的内容吗？赶快添加微信公众号“ly89cn”，或者扫描下方的二维码吧！

 

本文来源于王业楼的个人博客，本文地址：http://www.ly89.cn/detailB/63.html

欢迎分享本文，转载请注明本文出处和地址

转载于:https://www.cnblogs.com/ly89cn/p/4966125.html