0

我需要像这样制作一个进度条：

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

它必须在（IE6+、Chrome 3+、Firefox 5+、Opera 9+）中工作。因此，对于 IE 中的边界半径，我添加了 ie-css3.htc，但问题是 - 在 IE 中，当我添加边界半径和线性渐变背景时，不会显示边界半径。- 是否有可能当 DIV 宽度为 43% 时不会显示黑边。什么时候会显示 100%。就像图片一样。

这是代码：

<!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>
4

2 回答 2

3

我只是在这里猜测，但我认为结合背景渐变和圆角黑客可能会导致一些奇怪的行为。

我只是简单地省略了 IE6-8 的圆角。它被称为“渐进式增强”。更好的浏览器可以获得更好的体验。IE6-8 的进度条仍然可以“工作”，它们只是有方角而不是圆角。对象的要点 - 正在取得的进展量 - 仍然对用户有用。您的用户不会从 IE6 转到 Chrome 并比较进度条。放手吧。

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

于 2012-07-03T13:23:37.050 回答
0

Internet Explorer 6 相当老旧，不支持 css3。任何一个

  • 按照 ajm 的建议使用 CSS3Pie（我很惊讶它甚至可以工作），
  • 使用 javascript，
  • 使用圆角图像，
  • 或者只是接受它太旧并且用户应该更新他们的浏览器。
于 2012-07-03T13:29:38.083 回答