带有border-radius和背景渐变的HTML进度条

Question

I need to make a progress bar just like this: 我需要像这样制作一个进度条：

http://kashqool.com/files/progress-bar.png http://kashqool.com/files/progress-bar.png

It must work in (IE6+, Chrome 3+, Firefox 5+, Opera 9+). 它必须适用于（IE6 +，Chrome 3 +，Firefox 5 +，Opera 9+）。 So for border-radius in IE i added ie-css3.htc but the problem - in IE when i added border-radius and background with linear gradient the bordoer radius will not be shown. 所以对于IE中的border-radius我添加了ie-css3.htc但是问题 - 在IE中我添加border-radius和背景时使用线性渐变，bordoer radius将不会显示。 - Is it possible that when DIV width is 43% will the black side will not shown. - 当DIV宽度为43％时，黑方可能不会显示。 And when will be 100% it will be shown. 什么时候会100％显示出来。 Just like picture. 就像图片一样。

this is the code: 这是代码：

<!DOCTYPE HTML>
<html>

<head><title>Level 1</title>

<style type="text/css">

html,

body{
margin:0;
paddding:0; 

}

h3{
padding:0;
`margin`:0;
}

.progress_bar1{
behavior:url(ie-css3.htc);
background-color:white;
position:relative;
width:700px;
height:30px;
border:1px solid black; 
border-radius:8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
float:left;
padding:4px;

}

.first_bar{
behavior:url(ie-css3.htc);
background-color:white;
width:100%;
height:28px;
float:left; 
z-index:1;f

}

.div_100{
background-color:red;
width:100%;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr=#FF8A2BE2, endColorstr=#FF000000);
background-image: -webkit-gradient(
    linear,
    left top, right top,
    from(blueviolet),
    to(black)
);
background-image: -webkit-linear-gradient(
    left,
    blueviolet,
    black
);
background-image: -moz-linear-gradient(
    left,
    blueviolet,
    black
);
background-image: -o-linear-gradient(
    left,
    blueviolet,
    black
);
background-image: linear-gradient(
    left,
    blueviolet,
    black
);

border-radius:8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
height:28px;
float:left;     
}

</style>

</head>

<body>
<h3> Level 1 </h3>
<div class="progress_bar1">
    <div class="first_bar">     
        <div class="div_100"></div>     
    </div>
</div>

</body>

</html>

Answer 1

I'm only guessing here, but I would think combining a background gradient and rounded corner hack would probably result in some odd behavior. 我只是在这里猜测，但我认为结合背景渐变和圆角黑客可能会导致一些奇怪的行为。

I would just simply omit rounded corners for IE6-8. 我只是简单地省略了IE6-8的圆角。 It's called 'progressive enhancement'. 它被称为“渐进增强”。 Better browsers get better experiences. 更好的浏览器可以获得更好 The progress bar will still 'work' for IE6-8, they just will have square corners instead of rounded ones. 对于IE6-8，进度条仍然“有效”，它们只有方角而不是圆角。 The point of the object - the amount of progress being made - will still work for users. 对象的重点 - 正在进行的进度 - 仍然适用于用户。 Your users won't go from IE6 to Chrome and compare the progress bar. 您的用户不会从IE6转到Chrome并比较进度条。 Just let it go. 放手吧。

See: http://dowebsitesneedtolookexactlythesameineverybrowser.com/ 请参阅： http ： //dowebsitesneedtolookexactlythesameineverybrowser.com/

Answer 2

Internet Explorer 6 is quite old and doesn't support css3. Internet Explorer 6很老，不支持css3。 Either 或

use CSS3Pie as ajm suggested (I'm surprised that even works), 使用CSS3Pie作为ajm建议（我很惊讶甚至工作），
use javascript, 使用javascript，
use rounded image corners, 使用圆角图像角
or simply accept that it's too old and users should updater their browser. 或者只是接受它太旧了，用户应该更新他们的浏览器。

带有border-radius和背景渐变的HTML进度条

问题描述

2 个解决方案

解决方案1
2 2012-07-03 13:23:37

解决方案2
0 2012-07-03 13:29:38

带有border-radius和背景渐变的HTML进度条

问题描述

2 个解决方案

解决方案1 2 2012-07-03 13:23:37

解决方案2 0 2012-07-03 13:29:38

解决方案1
2 2012-07-03 13:23:37

解决方案2
0 2012-07-03 13:29:38