progress元素兼容IE6~IE9的处理实例页面

回到相关文章 »

代码:

CSS代码:
progress {
    display: inline-block;
    width: 160px;
    height: 20px;
    border: 1px solid #0064B4;  
    background-color:#e6e6e6;
    color: #0064B4; /*IE10*/
}
/*ie6-ie9*/
progress ie {
    display:block;
    height: 100%;
    background: #0064B4;
}
	

progress::-moz-progress-bar { background: #0064B4; }
progress::-webkit-progress-bar { background: #e6e6e6; }
progress::-webkit-progress-value  { background: #0064B4; }
                
HTML代码:
<progress max="100" value="20"><ie style="width:20%;"></ie></progress>
                
JS代码:
if (typeof window.screenX !== "number") {
    document.createElement("progress");	
    document.createElement("ie");	
}
                

效果: