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
欢迎分享本文，转载请注明本文出处和地址