你的位置:首页 > 网页设计

[网页设计]html5中的progress兼容ie,制作进度条样式


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

    

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

 

    一、progress使用方法

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

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

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

 

    二、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  { backgroundblue; }
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

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