0

次のような進行状況バーを作成する必要があります。

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

(IE6 以降、Chrome 3 以降、Firefox 5 以降、Opera 9 以降) で動作する必要があります。したがって、IEのborder-radiusの場合、ie-css3.htcを追加しましたが、問題-IEでborder-radiusと背景を線形グラデーションで追加すると、bordoerの半径が表示されません。- 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 に答える