我一直在开发一个网站，但无法在Internet Explorer中加载任何类型的进度条。我尝试了html中的基本进度条，以及更复杂的CSS，这两个都没有用。我有3个脚本，第一个是基本进度条的html代码，以及4个更复杂的脚本。第二个脚本是更复杂的条形图的CSS样式。最后，我有我的运行文件，用于实时更新我正在处理的网站。我在Apache 2.4.10上运行该站点，它在Firefox和谷歌浏览器中都能正常运行。在Internet Explorer中尝试时，所有加载的都是一个黑色矩形，而不是4个实际条形图，以及一个较小的进度条。如果您看到我的代码中的缺陷或者您已解决问题，请告诉我。
这是HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="progressbarstyle.css">
</head>
<title> Test</title>
<style type="text/css">
</style>
</head>
<body>
<progress max="100" value="10"></progress><br/>
<div class="meter red">
<span id="progress-load" style="height: 60%" > </span>
</div>
<div class="meter red">
<span id="progress-load" style="height: 60%" > </span>
</div>
<div class="meter red">
<span id="progress-load" style="height: 40%" > </span>
</div>
<div class="meter red">
<span id="progress-load" style="height: 50%" > </span>
</div>
</body>
</html>
<script>
这是CSS
p {color: white;
background-color: black;}
body {background-color: #F5F5DC; }
.meter {
float: left;
height: 500px;
width: 50px;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
-moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
position:relative;
overflow: hidden;
}
.progress-load {
display: block;
height: 100%;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: -webkit-gradient(
linear,
center right,
center right,
color-stop(0, rgb(43,194,83)),
color-stop(1, rgb(84,240,84))
);
background-image: -webkit-linear-gradient(
center right,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
background-image: -moz-linear-gradient(
center right,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
background-image: -ms-linear-gradient(
center right,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
background-image: -o-linear-gradient(
center right,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
-webkit-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
-moz-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
overflow: hidden;
position:absolute;
left: 0;
bottom: 0;
width: 100%;
}
.red > span {
background-color: #f0a3a3;
background-image: -webkit-gradient(linear,
left top,left bottom,color-stop(0.#f0a3a3),color-stop(1, #f42323));
background-image: -webkit-linear-gradient(right, #f0a3a3, #f42323);
background-image: -moz-linear-gradient(right, #f0a3a3, #f42323);
background-image: -ms-linear-gradient(right, #f0a3a3, #f42323);
background-image: -o-linear-gradient(right, #f0a3a3, #f42323);
}
.meter > span:after {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image:
-webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)),
color-stop(.25, transparent), color-stop(.5, transparent),
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)),
color-stop(.75, transparent), to(transparent)
);
background-image:
-webkit-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
background-image:
-moz-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
background-image:
-ms-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
background-image:
-o-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px;
-webkit-animation: move 2s linear infinite;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
最后这是我的运行文件
<!DOCTYPE html>
<html>
<style type="text/css">
</style>
<script>
function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari php<!-- include('test.php');--> ?>
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","Progress.html",true);
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.setRequestHeader( "If-Modified-Since", "Sat, 01 Jan 2000 00:00:00 GMT" );
xmlhttp.send(null);
//showCustomer('ALFKI');
setTimeout(function(){showCustomer('load')}, 1500);
}
</script>
</head>
<body onLoad="showCustomer('Load')">
<div id="txtHint"></div>
</body>
</html>