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

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