我需要制作一个进度条,就像这样:

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>

最佳答案

我只是在这里猜测,但我认为结合使用背景渐变和圆角hack可能会导致某些奇怪的行为。

我只是简单地忽略了IE6-8的圆角。这就是所谓的“渐进增强”。更好的浏览器获得更好的体验。进度条对于IE6-8仍将“起作用”,它们只是具有圆角而不是圆角。对象的要点-所取得的进展-仍然对用户有效。您的用户不会从IE6转到Chrome,也不会比较进度栏。放手吧。

参见:http://dowebsitesneedtolookexactlythesameineverybrowser.com/

关于html - 具有边框半径和背景渐变的HTML进度栏,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/11311810/

10-13 01:32